Jump to content
GreenSock

ErraticFox

Material Design Animations?

Go to solution Solved by OSUblake,

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, I'm trying to add a custom bezier from here, in a example (.25,.1,.25,1), and I'm having troubles as it doesn't work. I have the element off the page with transform: translateY(-300px);, but when the animation happens, it jumps to the original position and then uses the bezier to go back up. Though I'm wanting it to start from the -300px and go down. Any help? Thanks! :)

Link to comment
Share on other sites

Hi ErraticFox  :)

 

Welcome to the GreenSock forums.

 

It's a bit difficult to say what the problem might be without seeing some code. To get you the best answers, we ask that you create a CodePen demo for us. Please follow the link below to see about doing that. 

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Once you have that available, everyone around here will be happy to assist you.

 

Happy tweening.

:)

Link to comment
Share on other sites

  • Solution

GSAP currently does not provide a way to do custom Bezier easing like that. Please see this post...

http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357

 

Include this script and you're good to go.

https://gist.github.com/OSUblake/4d9f0caf980f4ee492ef#file-cubicbezier-js

TweenLite.to(foo, 0.5, { y: 0, ease: CubicBezier.config(0.25, 0.1, 0.25, 1) });

See the Pen oLZzLG?editors=0010 by osublake (@osublake) on CodePen

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