Jump to content

Ali Manuel last won the day on June 6 2021

Ali Manuel had the most liked content!

Ali Manuel

  • Posts

  • Joined

  • Last visited

  • Days Won


Ali Manuel last won the day on June 6 2021

Ali Manuel had the most liked content!

1 Follower

About Ali Manuel

  • Birthday 09/30/1993

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Ali Manuel's Achievements

  1. Hello @h-amad , are you looking for something like this animation ? GSAP Display not synced (codepen.io)
  2. Hello @whizzbbig , There might be better ways to accomplish this animation , such as 3D card Animation on hover (codepen.io)
  3. Hello @Pauline Brothier , the problem inside the lottiefile you can check this link http://airbnb.io/lottie/#/supported-features also I see that you are using Base64 image in your json file , Bas64 encoded images are good practice for a small size (KB) images. https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/. I suggest to use other way for this animation because it's 3D animation, please check this pen : https://codepen.io/osublake/pen/VwaKMpw/2152a28cffe2c2c0cca8a3e47f7b21c6 Have a nice day
  4. Hello @Paulina , I have checked you pen and your website , and I saw that is the problem in your JSON file Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR /grace/wp-content/uploads/2022/03/box-animation.json:1 check the console
  5. Ali Manuel

    svg animation

    Hello @Moses , I think you need to use MorphSVGPlugin
  6. Hello ,@codanux change the end to be like end: 'bottom bottom', const timeline2 = gsap.timeline({ scrollTrigger: { id: 'section2', trigger: '#section2', scrub: true, markers: true, pin: true, start: 'top top', end: 'bottom bottom', pinSpacing: true, // end padding problem endTrigger: '#section3' } });
  7. Hello @Vijith , you can check my solution https://codepen.io/itsalimanuel/pen/oNpLXyY?editors=1010 Have a nice day 🙂
  8. Hello @dc65k , you mean something like this ? https://codepen.io/itsalimanuel/pen/yLMGNEK/17f5ec8b40f835f2abf9dcf531a13d60?editors=0010
  9. Exactly , so the point it was to add this line ? .add(() => ScrollTrigger.refresh()) Many thanks @OSUblake
  10. Hello @OSUblake, no , sorry I add another link 🥴 the correct link https://codepen.io/itsalimanuel/pen/gOopGeJ?editors=1010
  11. Hello There, I got a problem with my animation when I use the scrollTrigger for the second element. Also , I can't see the markers! any explanation ? Thanks
  12. Hello @PedroZorus , I think it's an CSS issue ,you can fix it by div{ max-width:100% !important; width: 100% !important; } https://codepen.io/itsalimanuel/pen/QWqgeGY Cheers
  13. Hello @JJulien , hope this help you https://codepen.io/itsalimanuel/pen/276d9e148fa0a763570eaf298dbc7360
  14. Hello @GRVTY , I can't see your example (code) , check the codepen link pelase.