Search the Community
Showing results for tags 'animation css'.
Found 2 results
-
Hi! I am trying to transform or build this css animation into a GSAP timeline because with CSS is consuming too much CPU. The #bar-- is a g element of an svg that contains 80 bars @for $i from 80 through 1 { #wave-g__top--#{80 - $i} { animation-name: barOpacity; animation-iteration-count: infinite; animation-duration: 5s; animation-delay: $i * 0.065 + 0.25s; } } @keyframes barOpacity { from { opacity: 1; } to { opacity: 0.2; } } This is animation I am getting with CSS https://i.gyazo.com/fec064c25c2456ce2c3e34e932a5607e.mp4 and I thought this could be the similar in GSAP but is just not working, I am very new with this actually. const bars = document.querySelectorAll('#wave-g__top g') let tl = new TimelineMax({ repeat: -1 }) bars.forEach((b, index) => { const delay = index * 0.065 + 0.25 tl.to(b, 0.1, { opacity: 0.2 }, `-=${delay}`) })
-
I have a logo split into three parts. And wan't to make some parts disappear (and reappear) based on scroll. But the animation is acting totally weird (not doing the thing I ask it to – yeah, I know it does. But the logic kind of always goes out the window with this). (couldn't make codepen, jsfiddle or js bin work due to the scroll ... ) But this SHOULD be fairly simple. Make some part disappear, and have the container move up a bit after a delay, and the reverse ... let duration = 1; $window.scroll(function () { if ( $window.scrollTop() > 200 ) { TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } ); TweenMax.to('.logo', duration, { top: '-50px', ease: Power0.easeNone, delay: duration } ); } else { TweenMax.to('.logo', duration, { top: 0, ease: Power0.easeNone } ); TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 1, ease: Power0.easeNone, delay: duration } ); } }); I simply don't get why the animation seem random; showing, hiding, moving up and down. Never ending in a state expected. Anyone got any idea what I'm missing (again)?
