Jump to content
Search Community

ScrollTrigger with background image zoom, multiple triggers

Christiemade test
Moderator Tag

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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 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...