First scale on load then on scroll

[shikari]

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

[akapowl]

 

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 6921915ffa41edc59d6c27d65a618f22 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

 

 

[shikari]

Hey @akapowl.
Thanks a lot. This is what I need