Jump to content

Adel Kamel

  • Posts

  • Joined

  • Last visited

Adel Kamel's Achievements

  1. I found solution .to(imageProduct, { className: 'image-product blur'}, "-=.5")
  2. 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
  3. 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>
  4. Thanks a lot I try this one.
  5. 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