Jump to content
Search Community

Bezier animations, and responsive design

leeto 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

I just started to get into using the TweenMax JS animation library, and I have to say that it is pretty sweet. I've gone through and started doing test, and such, and tested the bezier plugin ,which is pretty awesome in itself.

 

My question with the bezier plugin is whether or not it would handle responsive design, such as when the user rescales down their browser window?

 

Currently I have this tween, that is set to animate when the item comes into view. 

var atween = TweenMax.to('.arrow-test', 2, {
    bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, top:400, alpha:1} ], 
    ease:Power1.easeInOut,
    paused: true
});

My CSS is as follows: 

.arrow-test-wrapper { position: relative; }
.arrow-test { position: relative; top: 0; left: 0; }

Does animating on bezier curves support responsive design? Or is there something that I am missing in my code? Thanks!

Link to comment
Share on other sites

Help me understand what you're expecting the tween to do. You're feeding it specific values for left, top, and alpha that it plots a smooth bezier through. Are you saying you want to suddenly change those mid-tween to something else based on the window size? If so, the answer is no (sorry). 

 

I suppose you could try putting things into a parent <div> and having that scale up/down as the window size changes, thus all the child elements would appear to scale too. Just a thought. 

 

You can definitely kill a tween anytime too and just create another tween based on whatever new dimensions you want. 

Link to comment
Share on other sites

Jack, 

 

Thank you for the quick reply! Yes, so basically, what I had thought to test was if the a website/page was built using a responsive grid (i.e. Foundation, or Bootstrap), and when the user resizes their window the ".arrow-test-wrapper" (percentage base, say .row.column) would resize.

 

So, I wondered if the bezier curve positions would alter themselves relative to that parent element.

 

I assumed that the values would not take in a percentage, integers only? 

Link to comment
Share on other sites

Hi,

 

Since you're passing absolute values (meaning values in pixels), the only solution is to create some code that changes those values depending on the screen size and then pass those values to the bezier plugin through an array.

 

You can see how to pass the values via array to the bezier plugin look at this codepen of the Greensock collection:

 

See the Pen ABkdL by GreenSock (@GreenSock) on CodePen

 

Rodrigo.

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