Jump to content
GreenSock

philip_b

scale and move image relative to mouse scroll

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

Hi guys, I'm new to all of this.  Came across GS while investigating ScrollMagic to perform a parallax effect and it said it required GS.  It got me to thinking about using GS for all my animations on the site. I've currently managed to write some JS (not my native language, i'm okay with php/html/css but muddle my way through JS) to center an image (based on size of parent div and size of image) then on scroll scale down the image whilst sliding it to the left.  I'm pleased with the effect but wondered is this something I could do with GS since I'll be loading it to do the parallax effect anyway.

 

I've just created my first codepen to demonstrate what I've written so far.

 

I know I could probably figure this all out myself if I read the quick start and looked at a few examples but I'm trying to balance about 10 plates on sticks at the moment and a few are starting to wobble!

 

I've also got wow.js loading on the site but have a feeling I won't need that once I have GS figured out.

 

I'm not asking for someone to write the code (would be nice) but if you could let me know that it can be done with GS and a few pointers on how to do it would be great.

 

Cheers,

See the Pen mPPMQN by butlerps (@butlerps) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. I couldn't quickly decipher all the logic in the code you provided and figure out how all the values were being determined and such. I'm also not much a ScrollMagic expert (but I know it's great for this type of stuff).

 

That said, here is a single tween that will resize your blue div. 

TweenLite.from(".navbar-brand", 1, {width:300, height:150});

http://codepen.io/GreenSock/pen/eZZMKN

 

It seems to produce similar results to what you had. 

 

I think you could just plop that into ScrollMagic and it would work just fine.

Definitely check out our Getting Started video it will quickly get you up to speed with the basics.

  • Like 2
Link to comment
Share on other sites

Hi Carl,

thanks for your reply and example.  I don't think i'm going to be able to reproduce the effect I want with GS as I don't want the image to scale down/slide from centre to left when the page hits a certain scroll position rather I want the scale/slide to be proportionate to the scroll position.  In other words 10% scroll = 10% reduction of size/slide, 50% scroll = 50% reduction of size/slide and so on.

 

I'll certainly be using GS for everything else so no doubt you'll be seeing me again with more questions.  Before then I'll certainly be checking out the Getting Started video.

Cheers,

Philip

Link to comment
Share on other sites

Hello butlerps, I'm not quite sure what your after.. but i forked Carl's codepen from above. I added a mouse wheel event handler that simply just plays and reverses the timeline on scroll up and scroll down with the mouse wheel.

 

Try and scroll up and down to see the element change size.

 

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

  • When the mousewheel is scrolled down GSAP plays() the tween / timeline.
  • When the mousewheel is scrolled up it will reverse() the tween / timeline.

You could also make your tween use a CSS transform scale instead of width and height if you want.

 

But GSAP should be able to do any type of animation.. simple or complex!

 

:)

  • Like 3
Link to comment
Share on other sites

Hi Jonathan,

thanks so much for spending the time on this, I like your inplementation however it still isnt the same as my original in that your animation once started goes through to completion i.e from 0 to 100% whereas with my script I can stop the animation wherever i want to just by stopping the scroll wheel.

I didn't want to share the following link as it is a development site and will eventually be removed, but take a quick look to get a feel for what I want. 

Perhaps the final solution is a mix of my code the shrink/slide the logo based on scroll position and use GS to slide in the menu which like your examples is event driven and once started goes through to completion.

http://openentrances.bricklanestudio.com

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