Material Design Animations?

[ErraticFox]

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!

[PointC]

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.

[ErraticFox]

I'm having trouble creating a new ease or is this even possible? Example shown here: 

See the Pen gMmMKX by ErraticFox (@ErraticFox) on CodePen

[OSUblake]

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