Jump to content
Search Community

Tween direction

Emilek1337 test
Moderator Tag

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 @Emilek1337 and welcome to GSAP!

 

Within the fromTo, your starting *from* a scale of 1.5 (and not tweening that property in the *to* so no change) and going *to* xPercent: 100. So, what you want is the from to start at xPercent: 100 and go to xPercent: 0. See the CodePen illustrating this.

 

See the Pen omEKvr by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

 

 

  • Like 3
Link to comment
Share on other sites

19 minutes ago, Shaun Gorneau said:

Hi @Emilek1337 and welcome to GSAP!

 

Within the fromTo, your starting *from* a scale of 1.5 (and not tweening that property in the *to* so no change) and going *to* xPercent: 100. So, what you want is the from to start at xPercent: 100 and go to xPercent: 0. See the CodePen illustrating this.

 

See the Pen omEKvr by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

 

 

Thank you for your help, I can't really make use of your example cause I use the overlay animation to reveal an image underneath. So I have the overlay and with my fromTo I hide the overlay and the image is shown. I don't think thats the right way to do this. Can't I just somehow animate the img width from 0% to 100% starting from the right? I want to achieve similiar effect to this example: https://elimchan.com/

Link to comment
Share on other sites

I would not animate the image width at all ... you'll get some horrible squeezing of the image itself. If what you're looking for is an overlay to tween from right to left to reveal an image, you can still use what I have shown above. Here is an example,

 

 

 

See the Pen pGaMOx by sgorneau (@sgorneau) on CodePen

 

 

Note, the swipe is right to left as you asked for in the first post (the example you provided is left to right). Principles all remain the same for either direction.

 

  • Like 3
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.
×
×
  • Create New...