Search the Community

Greetings everyone! I'm thrilled to be part of this community, and it's my first foray into using GSAP for animations. While it's proving to be a bit of a challenge, I'm making steady progress thanks to the documentation. I'm just about wrapping up my animations. In my current React project, I'm employing GSAP's ScrollTrigger to animate a component nested within a wrapper, which I've imported into my main JSX file. I've run into a small snag. When a user is scrolling and they hit the ScrollTrigger start line, the animation can retrigger too rapidly, resulting in a less-than-ideal visual experience. I'm wondering if there's a way to introduce some kind of buffer, perhaps in the form of margins, to prevent users from quickly toggling the animation on and off. I've posted a snippet of my code below. I'm eager to optimize my code for the best user experience possible. Your insights would be greatly appreciated! Looking forward to diving deeper into GSAP and learning more. Thank you in advance! Inside my animations.jsx export const SlideUp = ({ children, y }) => { const elementRef = useRef(null); useEffect(() => { const element = elementRef.current; gsap.set(element, { opacity: 0 }); const animateIn = () => { gsap.fromTo( element, { opacity: 0, y: y || 50 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } ); }; const scrollTrigger = ScrollTrigger.create({ trigger: element, start: 'top bottom', onEnter: () => { animateIn(); }, scrub: true, }); return () => { scrollTrigger.kill(); }; }, []); }; Inside my main page <SlideUp> <div className="image-row"> <div className="content-container"> <img className="project-image" src="images/img1.webp" alt="" draggable="false" /> </div> <div className="content-container"> <img className="project-image" src="images/img2.webp" alt="" draggable="false" /> </div> </div> </SlideUp>

Hey fellow GreenSockers! I'm trying to make a homepage slider using ScrollTrigger for the first time. In a practical way I'm nearly there, but my code has a lot of repetition, so that can't be good. #designercode Besides that, when you scroll fast the text is stacking up and is becoming a bit of a mess. What the best approach to fix this? Could someone please review (and perhaps optimise a bit) my code? Thank you in advance! Jan

Hi! I've built an animation with greensock and I checked the repaint in Chrome (and in Firefox too). And there are. Is it okay or should I optimize my animation somehow? Thanks, Soma https://codepen.io/szsoma/pen/vZgxmq

Hey guys, I just started using GSAP and so far I am very impressed. I am running into some performance issues though, so I could really use some help! I am working on creating a web application that is kind of like a guitar hero for piano. I need the application to be able to animate a bunch of rectangles downward at a constant rate (each rectangle represents a note in a song). I am running into some performance issues though, since a song can contain thousands of individual notes. I have created a codepen that demonstrates what I am talking about. There is a stutter once and a while that I cannot stand. Here is a link to the codepen http://codepen.io/MicahHauge/pen/EyJjGA?editors=0011 Let me know if you see a better way of doing this that will prevent the stutter. Thanks, Micah Hauge

Hi Guys, I have made my own boilerplate and pretty much utilized TweenMax to the best of my knowledge in my project. Here is the link (http://masterbuilder.infiniteimaginations.co/). On a mobile device (Nexus 5, iPhone 6, etc), the mobile menu is a bit choppy. I would like to blame the device itself but I know TweenMax is good in complex animations. Can anyone help me out here in optimizing the code? Thanks in advanced

Hey all. Not sure if this sort of post is welcome here, but I made a video summarizing some of my accumulated wisdom during my time using Greensock. It's mainly focused on HTML5 game developers that want to use the DOM. I believe I have achieved very good results using Greensock and it seems there are not many pushing the envelope in this area. For example, as of late my game now runs very smoothly even on mobile devices like the iPad2 and the Kindle Fire HDX. In fact at this time I am continuing to optimize the animations further so it is exciting to see what Greensock's full potential will be.

Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();

Hi all, Currently TweenLite marks completed tweens for garbage collection by setting gc=true. This gc var is later detected by the enterFrame function and the tween is removed from the masterList array using splice. Is there any specific reason its done like this? Could this not have been done directly in the complete() function? Thanks