Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Christiemade

ScrollTrigger with background image zoom, multiple triggers

Recommended Posts

I know I am doing this wrong :)

I want to be able to target and change the zoom level of the #target div multiple different ways throughout the users scroll.  How can I clean this up (and make it work?) Right now the second animation doesn't even animate, it just jumps.

See the Pen RwKqMVN by christiemade (@christiemade) on CodePen

Link to post
Share on other sites

I'm curious - is this for a class assignment or something? It looks remarkably similar to this other forums post: 

 

Well, I got intrigued and "whipped together" an effect (@PointC will appreciate that term) that'll make it super simple to zoom into certain parts of an element by animating the xPercent and yPercent and scale - you just tell it where on the image to zoom into like origin: [0.25, 0.8] would zoom into the spot that's 25% from the left, and 80% from the top (x and y axis). It automatically caps things so that the edges don't collapse toward the center, thus if you do [1, 1], you won't end up with the bottom right corner in the center of the area. 

 

Here's a CodePen that shows the effect:

See the Pen bGgQjyo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

My actual project is much more complicated, so I used the CodePen from another project just to speed up my making a simple example of what I am trying to do ;)

 

I think I can work with this, thanks!

Link to post
Share on other sites

I do want the image to by default (when not zooming) be scaled to fit the screen (Width/height) - which is a lot easier to do when its a background image.  So using this method I still have to add a bunch more code to do that part as well.

 

Also, I do need it to be able to stop/end at very specific positions, too.  Not just at each section.  🤔

Link to post
Share on other sites
28 minutes ago, Christiemade said:

I do want the image to by default (when not zooming) be scaled to fit the screen (Width/height) - which is a lot easier to do when its a background image.  So using this method I still have to add a bunch more code to do that part as well.

Nah, it's simple CSS:

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

 

29 minutes ago, Christiemade said:

Also, I do need it to be able to stop/end at very specific positions, too.  Not just at each section.  🤔

That should all be very doable. ScrollTrigger gives you tons of controls. 

 

Good luck!

  • Like 1
Link to post
Share on other sites

When I add an EndTrigger, it stops animating when reversed.

Link to post
Share on other sites
14 minutes ago, Christiemade said:

When I add an EndTrigger, it stops animating when reversed.

Please fork the CodePen and show us what you mean. It's difficult to troubleshoot blind. :)

Link to post
Share on other sites

Hm, what exactly are you trying to do?

 

Right now, your code is telling it to only do a zoom when section 3 is activated. You don't have any animation code set up for it ending/leaving. It's working exactly as it should. 

Link to post
Share on other sites

I am just trying to, in this example, get this image to animate (zoom in) as you scroll down, but then also zoom back out when you scroll up. I also want the zoom to take exactly as long as it takes to scroll through section 3 to start and complete its animation.  

 

I put

    endTrigger: '.section4',

In the code to tell it when to finish animating.

Link to post
Share on other sites

I am not clear how to use a timeline and also specify specific div positions....?  It may not always be exactly the length of a section, it needs to be able to be specified precisely per animation.  So, for example, if I wanted one of the zooms to start when section 3 was halfway up (top center) and end when section 4 was rolled through (bottom top), how would I do that?

 

See the Pen wvgRgmz by christiemade (@christiemade) on CodePen

Link to post
Share on other sites

Nevermind, it looks like maybe I did figure it out ;) Thanks for your help!

Link to post
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.

×