New To Greensock: Replication this css animation

[bucedup]

Hello All! Fairly new to Greensock and can't seem to find what I'm looking for after some google searching. I'd like to replicate this same css animation using TweenLite. What would be the equivalent of this css animation using greensock? Still trying to wrap my head around everything.

 

.container {
	animation-duration: .75s;
	animation-fill-mode: both;
	animation-name: slideInUp;
}

@keyframes slideInUp {
    from {
    	opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
    	opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

 

[PointC]

Hi @bucedup

 

Welcome to the forum.

 

A from() tween would be the simplest way to accomplish the same thing.

TweenLite.from(".container",  0.75, {y:10, opacity:0});

 

or you could use a fromTo() tween:

TweenLite.fromTo(".container",  0.75, {y:10, opacity:0}, {y:0, opacity:1});

 

If you're just getting started, I'd recommend:

https://greensock.com/get-started-js

https://greensock.com/jump-start-js

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

[bucedup]

Thank you, those links help quite a bit! And the animation example is perfect. Much appreciated