autoalpha problem if using a timeline on load and on hover in combination

[emjay]

Hello @all,

 

In the following pen I use 2 timelines. One is played right after loading the page and shows the arrow. After that the span element is shown for a short time and disappears again.

 

In addition I want the "show and hide" effect from the span element to be triggered on hover of the arrow. But this only works if I remove the "show and hide" effect fron the intro.

 

I think the problem is the following: When the intro is done, the span has set visibility:hidden and opacity:0 inline, and on hover only the translate3d attribute is changed inline, but not visibility and opacity. Therefore the span and the effect is not visible.

 

Do I have to proceed differently? Thanks for your feedback.

 

Martin

See the Pen PoNJrMM by emjay (@emjay) on CodePen

[akapowl]

Hey @emjay

 

This probably is because you are using .from-tweens in your timeline and the way GSAP handles the values of those when setting them up.

You could prevent that behaviour, you are experiencing, by first setting up the initial state of your elements with GSAP like so

 

gsap.set(next.find("a"), { scale: 3, y: -100, autoAlpha: 0 })
gsap.set(next.find("span"), { y: 10, autoAlpha: 0 })

 

and then in your timeline using .to-tweens instead

 

intro
    .to(next.find("a"), { duration: 1, scale: 1, y: 0, autoAlpha: 1 })
    .to(next.find("span"), { y: 0, autoAlpha: 1 })
    .to(next.find("span"), { delay: 0.5, y: 10, autoAlpha: 0 })
;

 

The same for your hover-function/timeline

 

nextHoverTl.to(next.find("span"), {  duration: 0.2,  y: 0, autoAlpha: 1 });

 

 

Also, I would apply the hover-functionality in an onComplete-function of that last tween in your intro-timeline - this way, hovering the element won't interfere, while the intro-timeline is still playing. Something like this:

 

 

intro
    .to(next.find("a"), { duration: 1, scale: 1, y: 0, autoAlpha: 1 })
    .to(next.find("span"), { y: 0, autoAlpha: 1 })
    .to(next.find("span"), { delay: 0.5, y: 10, autoAlpha: 0, onComplete: function() {
    
        next.on("mouseover", "a", function () {
            nextHoverTl.play();
        }).on("mouseout", function () {
            nextHoverTl.reverse();
        });
    
    } })
;

 

 

 

And here is an actual pen, to show, that this works as probably intended.

 

See the Pen a9940424cd9740a16a640db921fc921a by akapowl (@akapowl) on CodePen

 

Hope this helped a bit.

Cheers,

Paul

 

 

[emjay]

That helped a lot @akapowl

 

Thanks :)