Recreating Apple.com website scroll effects in sparkle

Question
1

Hi All.

New to sparkle…so forgive the noob question.

I’m trying to recreate the scroll effects on the apple website. in particular: iPhone pro site

starting with the white text in block #2 that lights up during scroll…and then fades again so that one phrase is lit @ a time. (see reply #2)

I figured out how to get the text to light up in sparkle… but having trouble figuring out if I can turn it off again. I thought ‘middle’ meant it would activate and deactivate as it entered the middle band, but seem not to be the case. (see reply #1)

Right now it just lights up each phrase segment…but leaves it on as I continue to scroll.

Any tips? or am I trying to push beyond Sparkle’s ‘current’ capability?

thanks.
€

2

image
image705×378 44 KB

3

image
image1110×1102 64.9 KB

4

On the Apple website, it activates based on the viewport. You’re on a good path to simulate it with Sparkle, but you won’t be able to generate the same effect and you’ll need thorough configuration to make it work “kind” in the same way. Also it may not behave as nice on other screen sizes.

You have to set each text block that you want to dim separately, then apply the Opacity configuration accordingly to that specific text box.

2 Likes
5

can u stack multiple actions one after the other…like a daisy chain? that way I can add the opacity back on after it comes off… 10% → 100% ->10%?.

6

Right now you can’t do that on Sparkle.

7

ok… thanks. guess were back to the drawing board

8

I have managed to make some complex input and output animations in Sparkle using groups. I’ll explain using text blocks as an example.

  1. Input: I group the text blocks I want to animate and animate the input of both blocks separately.

  2. Output: I give the output parameters to the whole group.

I’ve tested it with up to 3 levels and it works fine, what I don’t know is how it affects DOM performance or page load.

1 Like
9

will give it a try…but I think you’re onto something here