Jump to content
Search Community

gsap + ScrollTrigger - dynamic end triggers and tween dependencies

csantos test
Moderator Tag

Go to solution Solved by tailbreezy,

Recommended Posts

Hey guys,

I'm new to gsap, and I want to first thank you all for this amazing library. The examples look pretty neat!

 

Secondly, I'm seeking for some advice or some light on how to implement this crazy animation.

* The idea is to have an image centered in the screen with a width based on viewport-width: say 70% initial

01-initial.png.0a72d4b52370fd44ff1211c544bdf46e.png

 

* When user scrolls (scrub: true) the image has to scale up to occupy the 100% of the viewport width. and this animation has to stop at that point.
In this example you see the image (blue-border) being larger than the viewport height and it goes over the bottom of the screen.

02-scale-up-until-width-viewport.png.01fc210df8c3f0a9e7a30dd141b5e3de.png

 

* When the user keeps scrolling, the image should be kept scaled and scroll normally so we reveal the remaining section of the image.

In this example you see the image (blue-border) being larger than the viewport height and now it's over the top of the screen.

03-kept-scaled-keep-scrolling.png.33fdb5f024c46f2cdba787e6ff258aa8.png

 

* When the user keeps scrolling, and only after the bottom of the image (scaled-up) touches the bottom of the viewport, the image will finally scale-down to it's original size

04-scale-down.png.97b1b166e37aec15d163871a6cd4022c.png

 

 

I would appreciate any guidance you could provide me.!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...