Is this possible? Amazing scrolling animation on apple's MacBook Air website!

Is this possible to do with Sparkle? If it’s not possible, I can pay someone to do it in react.js. I’m not familiar with it but can I then put that react.js in an iframe?

  1. increase the size of the text as the user scrolls
  2. fade to black
  3. scroll through many pngs (that just happen to be frames of a MacBook Air)
1 Like

The majority of what I see on the Apple macBook Air website is natively doable in Sparkle, including the animated videos.

Have you checked out the Sparkle documentation on the topic? - Animation | Sparkle Documentation

1 Like

@FlaminFig Here is a video. On Apple’s page the zoom keeps the text in the center. But in Sparkle it moves up. How do I keep the text in the center and zoom like Apple’s?

On closer inspection that is a video being controlled with scrolling animation. So the onboard Scroll On Animation can get close, but to get that effect you’ll need to introduce a video…

But Scroll On Animation is not my strong point so maybe someone that is more skilful with this can chime in and help further.

@FlaminFig Thank you for looking closer! Instead of looking at the entire thing, is there a way to scroll and scale but keep the text in the center of the screen like the apple website? Just that part.

That would be a bit tricky @jackleg.
Animation With Scrolling indicates the animation can only happen while vertically scrolling so to keep in place is a tuffy! If we could have more than 10x scale (say 20) then I think it would work better in what you are after.

I guess in the end you’ll have to find a compromise in what you see and what Sparkle is capable of.

@FlaminFig thank you I’m new to this so hearing from you gives me confidence. Is there some custom code I could add you think?

Sparkle allows for embedding of code so yes that could be possible.

Maybe you can use something like this - Lottie Creator: Create Lottie animations easily as Sparkle loves Lottie files and I have seen some cool tricks from the other Sparkle(rs) here using it…

@FlaminFig Thank you so many great things out there! After testing and contacting support it looks like I can get a similar effect by grouping objects together then sticking them on the page where the last one pushes the previous.

1 Like

I would suggest custom designing the text animation and exporting it in Lottie or video. You can also achieve the exact same effect with Sparkle text options and animations but you can have issues with different screen sizes.

Thank you for replying! I am new, you’re suggesting creating the text zoom animation as a video in Lottie and then using scrolling to animate the frames? I’ve never used Lottie just wondreing

Well you could use the text animations built in on sparkle and then add the 3d rendering of the MacBook with the play as scroll function or you could do all of that (text and 3d render) in a Lottie and let sparkle play it on scroll.

I would need to know exactly what do you want to do to think the best way to do it :wink:

@dpamping are you able to make the 3d rendering with the MacBook?

Hello :wave:t2:

I couldn’t find the animation you’re asking for on Apple’s website, but here’s something close to the video you shared: https://sparkle.webpulse.fr/Macbook-Air.sparkle

I don’t think animations made with Sparkle are optimal for this kind of use, but the result is still usable. Not being an expert in animations and not having much time to look for other alternatives, you might find a way to optimize it.

(Translated with AI)

@Allan thank you so much! I was able to find some great people to help make the website and the animation.

1 Like

Yeah that’s completely possible :wink: