Jump to content
Search Community

Animating two different ranges

trajektorijus 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

Nah, it wouldn't be appropriate to use a single tween for that (the very nature of a "tween" is to animate between 2 values, not 4) - what you're looking for is a timeline which is like a container for tweens:

var tl = new TimelineLite();
tl.fromTo(element, 1, {x:200}, {x:300, ease:Power2.easeOut})
  .fromTo(element, 1, {x:0}, {x:100, ease:Elastic.easeOut});

Then, you can control the entire thing as a whole, like tl.restart() or tl.reverse() or tl.seek(0.5), etc. I'd highly recommend that you check out the timeline docs and these two videos/posts: 

http://greensock.com/sequence-video

http://greensock.com/position-parameter

 

I hope that helps. 

  • Like 2
Link to comment
Share on other sites

Hello trajektorijus, and Welcome to the GreenSock Forum!

 

To do the from 220 to 300  and then from 0 to 100 like you want .. you can use the fromTo() method:

// move #element on x-axis

// using TweenLite/TweenMax
TweenMax.fromTo("#element", {x:220}, {x:300, ease:Power1.easeOut});
TweenMax.fromTo("#element", {x:0}, {x:100, ease:Power1.easeOut});

// using TimelineLite/TimelineMax
var tl = new TimelineMax();
tl.fromTo("#element", {x:220}, {x:300, ease:Power1.easeOut});
tl.fromTo("#element", {x:0}, {x:100, ease:Power1.easeOut});

:

To update your vars .. you can do a number of things.

Resources:

GSAP Docs: http://greensock.com/docs/#/HTML5/GSAP/

TweenMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax

TimeliineMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax

fromTo() Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/fromTo/

 

:)

  • Like 2
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...