right direction?

[aozzz]

Hi guys, i am really impressed by gsap what an amazing tool!

But if anyone here can point me into right direction or maybe this is not even possible. I am looking to create this specific effect

https://www.apple.com/ca/apple-tv-4k/

similar to this one, or maybe i am wastin my time?

 

Thanks so much for any reply!

 

Alex

[Rodrigo]

Hi Alex and welcome to the GSAP Forums!

 

Which specific effect? There are a few scroll-based animations/effects in that page.

 

I'd suggest you to have a look at our getting started resources:

https://gsap.com/resources/get-started

 

Also ScrollTrigger is THE tool for this 💯

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1

 

Finally check the ScrollTrigger demos we have in Codepen:

https://codepen.io/collection/AEbkkJ

 

https://codepen.io/collection/DkvGzg

 

If you get stuck and have any particular problem, be sure to create a thread here in the forums and remember to include a minimal demo please. You can fork this codepen that loads GSAP Core and all the Plugins:

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

 

Happy Tweening!

[aozzz]

Thank you Rodrigo will do! Appreciate that!

[aozzz]

So here i am:)

It works ok now, only i want animation to start as soon as image hit the top!

And is it easy to create fixed image container size on the end?

Also how i can make Header stay there until scaling down is finished and all page start scrolling up?

Haha too many questions, but i hope you guys can point me to the right direction here or documentation!

 

See the Pen BaeYvKP by pixel15 (@pixel15) on CodePen

 

Thank you:)

Alex

[Rodrigo]

Hi Alex,

 

There is an issue with your code (but this is not the cause of what you're seeing, more on that later). You have this:

.to(
  "#image img",
  {
    scale: 0.5,
    duration: 1,
    transformOrigin: "top center"
  },
  {
    duration: 1
  }
);

A to() instance accepts just one configuration object, you're passing two.

 

My best guess is that you're trying to create a fromTo() instance:

https://gsap.com/docs/v3/GSAP/gsap.fromTo()

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[aozzz]

Thank you Rodrigo! i found that

 

And is it easy to create fixed image container size on the end?

Also how i can make Header stay there until scaling down is finished and all page start scrolling up?

 

Alex

[Rodrigo]

Hi,

 

As for the image size, you'll have to decide that based on your setup and if it's the best course of action given the particular ins/outs of your project. Personally, given the setup of your codepen I don't see any issues with the image having fluid dimensions as it is right now.

 

Regarding the header maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[aozzz]

Thank you Rodrigo, the only reason i want to have a fixed size of the image on the end is because my client wants this type of animation:

https://www.apple.com/apple-tv-4k/

when video transition to the tv screen, like in hero container.

I was just wondering if it's even possible

 

 

Thanks

Alex

[Cassie]

Hey, everything is possible.

 

If you want a specific ratio or size, a good way to accomplish it is with flip.fit()

Here's a demo showing that technique, it's a little more complex than the fromTo route as Flip is dynamic, (it relies on measurements that need to be calculated at the time of the animation) whereas scrubbed animations are pre-calculated for scroll performance.

 

To get around this mismatch we just have to make sure that the animation values are recalculated when the screen resizes.

See the Pen MWdVyop?editors=0110 by GreenSock (@GreenSock) on CodePen

[aozzz]

Cassie thank you so much! This is great! the only thing i am missing now is to transition video to the image. Lets say "fullWidth" has video, and "small" has Image. I tried, doesnt work:)

 

Thank you!

[Rodrigo]

Just put the image with a position absolute in the same container above the video element and tween the opacity of the image, as simple as that.

 

Hopefully this helps

Happy Tweening!

[aozzz]

Thank you Rodrigo and Cassie, i think it will do! Appreciate the help!