Jump to content
GreenSock

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

First scale on load then on scroll

Recommended Posts

Hi!
First of I want to thank GreenSock team for such usefull library. You're doing amazing job!
I've just started using GSAP and not experienced with that.
So what I need is to create an animation on a picture which would first scale down on page load and then scale up on scroll down and scale down on scroll up :) That might sound confusing. Hope you get what i mean.
On a codePen link I've attached, I'm trying to accomplish what I explained above. 
There two gsap blocks: the first one is responsible for the animation which is triggered on load; the second one is for animating the picture when I start scrolling up and down.
It doesn't work as I expect. But If I comment either of two blocks the other one will work as needed.
So I would appreciate If you help me out with my issue and probably show me best practices of how to do that.

See the Pen abNGGxJ by lElfenLiedl (@lElfenLiedl) on CodePen

Share this post


Link to post
Share on other sites

 

Hey @shikari - welcome to the forum.

 

First off, I removed ScrollMagic from your pen, because it is not a Greensock product, you neither need nor use it in your pen, and it was throwing errors - also, you probably don't need jQuery in there, too.

 

You could maybe set the scene like this ( I used a timeline here, not a single tween, like you did  - might not be neccessary ) 

 

var tl = gsap.timeline({ paused: true });

tl
  .to(fullWidthPicture, { scale: 1.3, duration: 1.5, ease: "sine.inOut" } )
;

tl.reverse(1.5);

 

on page load you reverse that timeline from its end, so it scale down from scale 1.3 to scale 1.0.

 

Then with a timeout dependend on the duration of your tween, you could initiate the ScrollTrigger after that tween is done

 

var timeout = gsap.delayedCall(1.5, function() {
  
  ScrollTrigger.create({

      trigger: fullWidthPicture,
      toggleActions: "play none reverse none",
      markers: true,
      start: "0 50%",
      end: "100% 0%",
      scrub: 1,
      animation: tl,

  });
  
});

 

 

 

That results in this:

 

See the Pen yLOjEWo by akapowl (@akapowl) on CodePen

 

When you are in full-window mode, you'll notice, that when the ScrollTrigger is being initiated, the image will start to immediately scale up a bit again - that is, because the image has already passed the set start-point of the ScrollTrigger, thus the tween of it will be executed for the portion, that it is already past that start-point.

 

 

Hope this is at least an inspiration for how you could set things up.

 

Cheers.

Paul

 

 

  • Like 5

Share this post


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.

×