Animation like on AppleTv (Main screen)

[RubberFruit]

 

Hello everyone, I'm new to gsap, can't find a codepen animation example like on main appletv screen(https://www.apple.com/ae/apple-tv-plus/), didn't find ScrollTrigger in the demos either. Can someone give me a hint or link to codepen with similar effect?

 

 

 

[Cassie]

Hi there! Welcome. 

 

Here's a little starting point for you. It's basically just a tween that's handling opacity with a ScrollTrigger attached to tie it to the scroll position.

See the Pen poZgOad by GreenSock (@GreenSock) on CodePen

This article is also a great place to go when you're learning - It's best to think of GSAP is a series of tools you can use to create any kind of animation you can dream up. Learning the core concepts will be much more useful than trying to look for specific effects on codepen.

 

Good luck with your learning journey!

 

[RubberFruit]

17 hours ago, Cassie said:

Hi there! Welcome. 

 

Here's a little starting point for you. It's basically just a tween that's handling opacity with a ScrollTrigger attached to tie it to the scroll position.

 

 

This article is also a great place to go when you're learning - It's best to think of GSAP is a series of tools you can use to create any kind of animation you can dream up. Learning the core concepts will be much more useful than trying to look for specific effects on codepen.

 

Good luck with your learning journey!

 

 

 

Thank you very much, I made it vaguely reminiscent of the desired result!)) Can you help me: I removed the scrub from the text so that on 1 scroll the full animation is played with transparency and the text moves up, but then the ability to play the animation back disappears if I scroll back up( achieve the desired result without a scrub?

[RubberFruit]

3 hours ago, RubberFruit said:

 

 

Thank you very much, I made it vaguely reminiscent of the desired result!)) Can you help me: I removed the scrub from the text so that on 1 scroll the full animation is played with transparency and the text moves up, but then the ability to play the animation back disappears if I scroll back up( achieve the desired result without a scrub?

 

I had to rearrange scrub from boolean value to 1)