Jump to content


:before element not animating after timeline animation

Moderator Tag
Go to solution Solved by gimperdaniel,

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 have a flip animation based on this codepen:


The flipping animation by itself works perfectly. However my "cards" have a :before and :after element. I noticed that sometimes the before and after element don't flip if the whole flipping animation inside a timeline.

CSSPlugin.defaultTransformPerspective = 1000;

            TweenMax.set($(".flipper .back"), {rotationY:-180});

            $.each($(".flipper"), function(i,element) {

                var tl = new TimelineMax({paused:true});

                tl.to($(this).children(".front"), 1, {rotationY:180});
                tl.to($(this).children(".back"), 1, {rotationY:0},0);

                element.animation = tl;


            function flipit(){

                $(".flipper").hover(elOver, elOut);

                function elOver()

                function elOut()

             //Show cards
            var timeline_tl = TweenMax.staggerFromTo($(".flip-container"),.7, {y:-80, opacity:0}, {y:0, opacity:1, onComplete:flipit},.2); 

It almost seems that the :before and :after were not picked up by the animation in time. Any ideas?

See the Pen vErBdO by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

My problem was solved by adding 


to the TO element.

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.