Jump to content
GreenSock

julien94270

Basic Tween And responsive move ?

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

Hello,

Just a question, even if it looks like from a newbie :)

I would like to know if GSAP is the required tool, if I want to have moves in a responsive website ?

A very simple example :
I have a box, aligned on my left side....

 

If I write this :

var $box = $('#box');
TweenLite.to($box, 5, {left:1280} );
 
My box will cross the screen from left to right (if my screen is 1280x800) !

Now, What if I resize my window ?
How could I get a move from left to the right border of my window, even if the size of my browser changes ...?

I hope it is not a stupid question  :mrgreen:


 

Link to comment
Share on other sites

No. That's not a stupid question. You should check out this blog post to learn about some of the responsive features of GSAP. Two really powerful properties are xPercent and yPercent, which will offset your element based on its size.

 

http://greensock.com/gsap-1-13-1

 

So by using xPercent with a left percentage, we can make your element stick to the right side like this.

TweenLite.set(box, { left: "100%", xPercent: -100 });

Here's a couple different ways you could animate it to that side. Option 2 uses "x" instead of "left", which is a transform, so it will perform and look smoother than "left".

// Option 1
TweenLite.to(box1, 3, { left: "100%", xPercent: -100 });

// Option 2
var x = -document.body.offsetWidth + box2.offsetWidth;
TweenLite.set(box2, { left: "100%", xPercent: -100, x: x });
TweenLite.to(box2, 3, { x: 0 });

See the Pen b604de457b538ab96f81dc9b8fec6d69 by osublake (@osublake) on CodePen

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