Jump to content
GreenSock

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

Scale image up

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

Link to comment
Share on other sites

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()'.

  • Like 6
Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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.

:)

  • Like 4
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.
×