Jump to content
Search Community

Zoom in on scroll

stephdev test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Everyone,

 

I am brand new to animation. I am trying to achieve an affect where when a user scrolls, the image zooms in and fades into the next image. Please see this url as an example of what I am trying to achieve: https://ihatetomatoes.net/demos/zoom-into-image-page-scroll/

 

That particular demo uses skrollr.js which I started to use but then read that it was deprecated and did not work on a lot of mobile devices. I then started to try and find an alternative library and came across scrollmagic. I have started learning it but I cant seem to find any 'zoom' or 'scale' option for scrollmagic. I then turned to Greensock which has various zoom effects but I want things to zoom only when scrolled, so that brought me back to scrollmagic. I really am just getting so confused as to how I can achieve this effect.

 

Please, if anyone can advise how I can get that 'zoom on scroll' effect when a user scrolls (using either Greensock or Scrollmagic) I'd be so grateful.

Thank you.

Link to comment
Share on other sites

Hey Steph and welcome to the forums!

 

I recommend that you check out this very helpful article by Craig, especially demos 3 and 4. 

The effect is different (moving and scaling instead of scaling and changing the opacity) but the technique is the same. Feel free to give it a shot and post back in this thread if you run into errors that you can't figure out. But if you do that, a CodePen of your issue would be very helpful. See the below for more information about that:

 

  • Like 2
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...