Search the Community

please I need too know why my animation is not smooth const boxType = document.querySelectorAll('.animated-element'); boxType.forEach((box, i) => { gsap.fromTo( box, { scrollTrigger: { trigger: box, start: 'bottom -100%', end: 'bottom 50%', scrub: true, markers: false, }, y: -20, transformOrigin: 'top', ease: 'power4.out', opacity: 0.3, stagger: 0.1, // Adjusted stagger value duration: 0.5, // Adjusted duration }, { scrollTrigger: { trigger: box, start: 'top 30%', end: 'bottom 50%', scrub: true, markers: false, }, ease: 'power4.out', y: 0, transformOrigin: 'top', opacity: 1, stagger: 0.1, // Adjusted stagger value } ); }); <ul class="mt-4 flex flex-col"> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Engage your global audiences</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Establish your brand</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Achieve your corporate purpose goals</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Connect with your employees</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Inform and influence your stakeholders</span > </li> </ul>

Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble

Hi, I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for. In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here. Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again. Thanks!

Hi Guys, I am loading a few flv's using VideoLoader and LoaderMax queue. My video is 720x406 and I am stretching it to fit in 1000x564. VideoLoader's API says that smooting on videos is turned on by default and I have tried setting it to true as well. Problem is that when I test the sfw in flash, smoothing works but when I run this file in browser or on it own, no smoothing is applied. I have also tried this: intro.rawContent.smoothing = true; Appreciate if anyone can point out what might be happening. Thanks, ak