TimelineMax() with external css animation code

[Maciek Lubocki]

Hello,

I have probably question which is very simple to anwer but still as a beginner this is for me a huge problem to solve.

I need to use TimelineMax() on my site to trigger multiple divs and make them life. Unfortunatelly for this, it is very very important

to have animation in css file. Below is standard code which works just fine.

 

var animateIn = new TimelineMax();

 

            animateIn

                .from(".blur_a", 1, {

                    y: 250,

                    delay: 0,

                })

 

But the question is how to make work this below....

 

.from(".blur_b", 1, {

                 classname: "ani_a"

 

            })

 

and in css:

 

 

.ani_a {

    opacity: 0.2;

 

}

 

or

.ani_a {

    animation: image_blur 1s linear; 

 

}

 

unfortunatelly neither of the work.

 

is it possible to make the class run on trigger on animation included in css file?

 

thank you for all suggestions.

Maciek

 

 

 

 

 

 

[PointC]

Sounds like you want to tween between classes. I think this thread can help you.

 

[Maciek Lubocki]

PointC,

thanks a lot. this is what I need!!

 

[ZachSaucier]

@Maciek Lubocki We also suggest using GSAP 3's sleeker API. You don't ever have to use Max/Lite stuff again! See the posts linked to here for more information:

 

[Maciek Lubocki]

Zach, that looks awesome. Must dig into it!

Thank you for sharing!!!!