Adel Kamel

Hello, thanks a lot for your help

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

Many thanks for your reply

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

Hello Rodrigo, Thank you for your reply. I found the solution to achieve my goal

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

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

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

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

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>

Thanks a lot I try this one.

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