[Show and hide each element with stagger]

Hello, thanks a lot for your help

[Show and hide each element with stagger]

Hello everyone,

I hope that you all are ok. I'm having difficulty creating an animation and I'm asking for your help.
I need to display messages one after the other.

I used the stagger method but the previous message does not disappear 😕

Message 1 is displayed but it does not disappear to make way for Message 2.

I hope you can help me.

Adel

See the Pen poQPRLa by adelarmis (@adelarmis) on CodePen

[Animation with 3 iterations, Add different animation on third iteration]

Many thanks for your reply

[Animation with 3 iterations, Add different animation on third iteration]

Hello everybody,

I hope you're doing well, sorry for my english.

 

I didn't found any solution to achieve that.

I have an animation that loops 3 times.
At the last iteration, I need to add a variant so that the text is always visible.

Thanks for your help

 

See the Pen poQPRLa by adelarmis (@adelarmis) on CodePen

[Restart a SplideJS carousel at the same time as my timeline]

Hello Rodrigo,

Thank you for your reply.

I found the solution to achieve my goal

[Restart a SplideJS carousel at the same time as my timeline]

Hello everyone,
My GSAP timeline loops 3 times.

I use Splide.js to display my products.

I can't make that when my timeline restarts, the product carousel also restarts from the beginning.

That's why I come to ask for your help

 

Adel

 

Link to Splide JS : https://splidejs.com/

Link to banner : https://images-armis-staging.s3.eu-west-1.amazonaws.com/bricorama/newtemplates2023/appnexus/html/slideshowV2_300x600.html

 

See the Pen poQPRLa by adelarmis (@adelarmis) on CodePen

[Make a condition on an animation]

Hello everyone,

 

I hope you are fine, 

First of all, I am sorry but i am unable to make a CodePen demo.

 

I have this Gsap animation and it works perfectly : 
 

document.addEventListener("DOMContentLoaded", function(event){

    const logo = document.querySelector('.logo');
    const titleOp = document.querySelector('.title-op');
    const shop = document.querySelector('.shop');
    const cover = document.querySelector('.cover');
    const tag = document.querySelector('.tag');
    const sideContainer = document.querySelector('.side-container');
    const alma = document.querySelector('.alma');

    const timeline = gsap.timeline({});

    timeline
        // LOGO ON
        .to(logo, {delay: .5, x: 0, opacity: 1, duration: .5})

        // COVER ON
        .to(cover, {x: 0, opacity: 1, duration: .5})

        // TAG ON
        .to(tag, {top: 0, opacity: 1, duration: .5})

        // TITLE OP ON
        .to(titleOp, {x: 0, opacity: 1, duration: .5})

        // SHOP ON
        .to(shop, {x: 0, opacity: 1, duration: .5})

        // COVER OFF
        .to(cover, { delay: 1.5, x: 50, opacity: 0, duration: .5,}, "-=.2")

        // TITLE OP & SHOP OFF
        .to([titleOp, shop], { x: 50, opacity: 0, duration: .5,}, "<")

        // SIDE-CONTAINER ON
        .to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" })

        // PRODUCT DESCRIPTION & IMAGE OFF
        .to(sideContainer, { delay: 2, x: 00, opacity: 0, duration: .5})

        // TITLE OP, SHOP & COVER DISPLAY NONE
         .to([titleOp, shop, cover], { className: 'hidden'}, "-=.5")

        // ALMA DISPLAY FLEX
        .to(alma, { className: 'alma flex'}, "<")

        // ALMA ON
        .to(alma, {x: 0, opacity: 1, duration: .5,})
});

I need to make a condition to bypass this tween when the sidecontainer div is empty

.to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" })

I thought to use this JS method to achieve that but I need your help for the syntaxe please
 

Thanks a lot

[.add not working on IE11]

I found solution

.to(imageProduct, { className: 'image-product blur'}, "-=.5")

 

[.add not working on IE11]

Hello everyone, 

 

I have used this code to add a class on an image:

.add(() => {
	imageProduct.classList.add('blur')
})

It works and all browsers except on IE11 when i have a syntaxe error:
https://prnt.sc/sGMY0enNYSZ1
https://prnt.sc/if_ZQMpk0Gvy

You can see here all my JS files:

document.addEventListener("DOMContentLoaded", function(event){

    const logo = document.querySelector('.logo');
    const pastille = document.querySelector('.pastille');
    const cover = document.querySelector('.cover');
    const legalNotice = document.querySelector('.legal-notice');
    const imageProduct = document.querySelector('.image-product');
    const shop = document.querySelector('.shop');
    const cta = document.querySelector('.cta');
    const arrow = document.querySelector('.arrow-black');

    const timeline = gsap.timeline({});

    timeline
        // Image product, pastille, logo and mention ON
        .to([imageProduct, pastille, logo, legalNotice], {delay: .5, opacity: 1, duration: .5})

        // Pastille OFF
        .to([pastille, legalNotice], {delay:4, duration: .5, opacity: 0})

        // Image product OFF
        .to(imageProduct, {duration:.5, y: 10, opacity: 0}, "-=.5")

        // Image product ON and blur
        .add(() => {
            imageProduct.classList.add('blur')
        })
        .to(imageProduct, {y: 0})
        .to(imageProduct, {delay:.2, opacity: 1})

        // Cover ON
        .to(cover, {delay: .1, opacity: 1, duration: .5})
        .to(cover, {y: 10, duration: .5}, "-=.5")

        // Cover OFF
        .to(cover, {delay:4, y: -60, duration: .5, opacity: 0})

        // Shop ON
        .to(shop, {delay: .2, opacity: 1, y:-75, duration: .5})
        .to(cta, { opacity: 1, duration: .5},"-=.5")
});

Thanks for your help

[Timeline restart issue]

It work perfectly, I have another question please.

It possible to repeat an animation with a different ending.

 

Target is to see content when animation is ending on second time.

 

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLKNNYW" data-user="geedix" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/geedix/pen/yLKNNYW">
  for Adel</a> by J Bradley Johnson (<a href="https://codepen.io/geedix">@geedix</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

 

 

[Timeline restart issue]

Thanks a lot  I try this one.

[Timeline restart issue]

Hello everyone, 
 

Hope you are fine, sorry for my english.

 

My animation must be played twice time when the page is loaded.

 

I have this animation code but it no longuer work: 

 

const logo = document.querySelector('.logo');
       const visual = document.querySelector('.visual');
       const wording = document.querySelector(".wording");
       const sequence = document.querySelectorAll(".sequence");

       const tlAnim = gsap.timeline();

       tlAnim
            .add(() => {
                wording.classList.add('hide');
                logo.classList.add('hide');
            })

            // Visual
            .from(visual, { x:-500, duration:.3, opacity:0, delay:.5 })
            .to(visual, { x:-350, duration:.3, opacity:0, delay:4 })

            .add(() => {
                visual.classList.add('hide');

                logo.classList.remove('hide');
                logo.classList.add('show');

                wording.classList.remove('hide');
                wording.classList.add('show');
            })

           // Shop Informations
           .from(sequence, { opacity:0, duration:.3, stagger:.2 })
           .to(sequence, { opacity:0, duration:.3, stagger:-0.2, delay:4 })

tlAnim.restart();

I hope to find some help

 

Best regards

Adel