Scale image up

[nick2price 2 Likes (Newbie)]

Hi all, once again apologies, it will not let me fork a codepen so I have to use https://jsfiddle.net/z69w9u4g/47/

 

So I am using Scroll Magic, in my example I have place a dummy section so you can see the effect.  So as you scroll down, you will see that the image scales up to 1.2.  This is fine, and seems to work without issues.

 

What I am trying to do however is this.  I would like to give the image an initial scale of 0.5 and then scale up to 1.2 as you scroll down.  Is there any way to give the image an initial scale of 0.5?

 

Thanks

See the Pen by z69w9u4g (@z69w9u4g) on CodePen

[Sahil 2,541 Likes (Superhero)]

You can set the scale from CSS using transform property.

 

img {
  transform: scale(0.5, 0.5);
}

 

Or you can define a fromTo tween and pass it to 'setTween()'.

[Jonathan 5,176 Likes (Superhero)]

Hello @nick2price and Welcome to the GreenSock Forum!

 

if you would like to set the initial transform scale using GSAP then do this:

 

// add this before your ScrollMagic controller var
TweenMax.set("#imgPlaceholder",{scale:"0.5"});

 

GSAP set() method: https://greensock.com/docs/TweenMax/static.set()

• Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

Happy Tweening!

[PointC 8,599 Likes (Superhero)]

Hi @nick2price

 

In addition to the advice above, you can use a from() tween and set the scale to 0.5 in that tween. This is the demo from my answer in your other thread.

 

See the Pen BwEvLO by PointC (@PointC) on CodePen

See how the paragraphs all start at 0.5 and then scale up when they hit the trigger? That's just using a from() tween in the each() loop.

 

Hopefully that helps. Happy tweening.