[Scrollmagic calculates the start incorrectly]

I have the problem that only on mobile devices the start of my Scrollmagic animation is not calculated correctly. On desktop devices the calculation works without problems. It doesn't matter which browser I use.

 

URL: https://pechschwarzmedia.de/webdesign-agentur/

 

$('.animation-image_video').each(function() {
        var element = $(this);
        ScrollTrigger.ScrollTrigger.create({
            trigger: element,
            pin: element.find(".animation-image_video__media"),
            start: "top top",
            end: "bottom bottom",
            markers: true
        });

});

 

 

 

[Animation takes a long time to start]

I have the problem that it takes a few seconds for my animation (timeline) to start. Unfortunately, I have no idea what could be the reason for this. I have already tried to set the delay to 0, unfortunately without success.

 

 

 

See the Pen PoQJPjW by jonasloerken (@jonasloerken) on CodePen

[Play animation again after reverse]

Ah, thanks for the approach. I have solved the whole thing via an associative array, I think it also works:

 

See the Pen vYpNyBp?editors=1111 by jonasloerken (@jonasloerken) on CodePen

[Play animation again after reverse]

Thank you very much for your answer. The problem is that the overlay is dynamic. I have updated the CodePen link again:

 

See the Pen vYpNyBp by jonasloerken (@jonasloerken) on CodePen

 

This leads to the fact that I can not create the timeline outside of a function, right? Otherwise I can't open or close the right overlay with the play() and reversed() functions.

[Play animation again after reverse]

Hey guys,

 

thanks for the response!

 

Sorry, I totally forgot about the CodePen demo. Here is the link: 

See the Pen vYpNyBp by jonasloerken (@jonasloerken) on CodePen

[Play animation again after reverse]

I use GSAP (Timeline) to show and hide an overlay. The overlay can be opened and closed without any problems. But when I want to open it again, it does not work.

 

function animate_media(overlay, reversed) {
    var media_tl = gsap.timeline({repeat: 0, paused: true});
    media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0});

    if(reversed) {
        media_tl.reverse(0);
    } else {
        media_tl.play();
    }
}

I pass the element and a boolean value to the function (depending on whether the overlay should open or close).

 

I noticed that the overlay keeps the following inline code after closing: opacity: 0; visibility: hidden; transform: translate(0px, 30px);

 

Is there a possibility to show the overlay again after closing, i.e. to play the animation again?