Search the Community

I'm Oliver, a noob of web animation,these two days I'm trying to do gsap marquee side project, I build 500 dom boxes as the sandbox url: https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js&fbclid=IwAR1tbmloHRXHUBHKG5FjBGDAx0TFd9sTkBJfSwpye8CQteO-TO8FNi1w4mw and I have few question: 1.I used setTimeout to seperate each box as a unique timeline animation,so that the single box animation could go to another line immediately after finished last line, instead of waiting the other 499 boxs finished in the same line if I use property stagger. This method would produce 500 timeline instances,it seems not a good idea, are there any methods could produce the same animation in one or few timeline? 2.If I do such animation in canvas,the browser render effciency would be better?

Trying to do a few things here and it seems I am close but not quite there yet. Certainly my lack of experience with GSAP is one thing standing in the way Hopefully someone can help, with either some input on what to change or perhaps a working example I've somehow missed. What I need this to do is animate according to the attached image (below). Where the panel slides in from the bottom as opposed to what it's doing now where it wipes upward and reveals from behind. I need it to slide in from the bottom and go upwards overtop. Also, when you get to the last two panels, rather than the second last panel (panel 9) moving up and leaving a blank space, I want it to just end the scroll animation and let the page scroll down to the next section (ending the gsap timeline there).

Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached. ubuntu screen recodere - Google Search.mp4 I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. Thanks in advance.

Hello, I'm kind of new to coding world and making my portfolio. It's nice that I can use GSAP animation for my project. But I've been stuck with making Accordian menu. I declared some useRefs to controll the Dom elements with Gsap animation, as I read GSAP tutorials with React. and I made some timelines inside of useEffect, I made some functions to handle event and useRefs. It works when I don't type on input component that I created next to the accordion ('category') It's expanded to level 1 menus of category, and when I click the single menu(level 1), then the level2 menu is expanded. and If I click another level1 menus of category, the level2 menu that was just opened , is closed automatically, and the level2 menu for the level1 menu that I click currently is expanded. Also, if I click the main button(like header, it says 'category' in my demo) ,everything is closed automatically. But It doesn't work properly once I type something on input component. the level2 menu is not closed properly, Although I click another level1 menu. and When I click the main button, level1 menus are closed but the level2 menu that was expanded still remains. Guess reverse() animation doesn't work properly when I type or create another event. I made a simple version of demo , I commented out some other animations in Search.js (just in case if it helpful to understand about this problem,I didn't remove) main animation for this issue is in CateGory.js . Also I commented out some explanation about my code. I would really appreciate if someone can halp me. my demo

Hey guys I have a question and I wanted to know if this is possible to do. I have a timeline with a ScrollTrigger gsap.timeline({ scrollTrigger: { trigger: element, scrub: 0.5, start: 'top bottom-=15%', markers: true } }) .to(element, {yPercent: -100}) .from($(element).find('.heading'), {yPercent: 20}, '<') .from($(element).find('.description'), {yPercent: 20}, '<') .fromTo($(element).find('.svg-path'), {drawSVG: "0"}, {duration: 1, drawSVG: "100%"}) .to(element, {opacity: 0}, '>-0.2') On this timeline I have multiple tweens, one of those is a drawSVG, but I don't want that svg animation to be attached to the scroll, so basically I just want the animation to appears once the svg is on the viewport. It's there a way to separate that single tween from the ScrollTrigger scrub? Or do I have to make another ScrollTrigger just for that drawSVG animation?

i created this basic scrolltrigger animation of spinning circle, its working fine but the problem im facing is when i do fast scroll then spin animation become snappy means its only play a single active "SectionTL1 2 3 4 5" gsap timeline. what i want when i scroll its scroll smoothly like this 0 to 72, 72 to 144, 144 to 216, 216 to 288 as we scroll through each section but when i scroll fast for example at 144 "SectionTL3" and stop at 288 "SectionTL5" it should play like 144 rotation to 288. like right now suppose if we scroll fast and stop at "SectionTL5" it will only play 216 to 288 and i want it to play full smooth 0 to 288 spin animation. i dont know how i can achieve that or what should i change in the existing codding to get the desire result i want. Thank you

I have 2 functions: generateParticles and animateParticles ( w. an inner timeline ). I also have a 'Main Timeline': gsap.timeline( { repeat: -1 } ).call( animateParticles, [numParticles - 1], '-=0' ); The problem is that 'animateParticles' executes only ONE time - the function will NOT repeat. How can I make the function 'animateParticles' repeat itself after the first execution - play multiple times ?

I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx

Hey! I would like the timeline to be completed before it fires again. Now when you hover really quickly it doesn't look good at all. I'm missing something in the structure that I struggle to find out. My first thought was to find the isActive() and then do some if statements. But isActive() is returning false all the time. - How can I finish the timeline before it fires again? - Do someone know why isActive() always returning false? This is probably a rookie mistake, and, this is my first post in a forum (ever!), so let me know if I could explain/structure my post better!

I have solved my own problem and updated the codepen by animating the cloned tile by adding the code below. Thanks for everyone's help. let cloneAnimation = clone.querySelector('.tile .inner-content'); gsap.to(cloneAnimation, { duration: 2.0, opacity: 0 })

Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks

Hi everyone, I'm trying to make an horizontal scroll, that I understand. I'm not very good at math and logic but I want to make like when u scroll the scale of the section goes .5 then back to normal. I have seen plenty of exemple but i cannot figure what logic is behind. Sorry for my english.

I'm trying to animate new Ajax content with the same property that original one. I've made this simple codePen for a better understanding. When box is clicked, it's animated by timeline. When button is clicked, new box is loaded. But I've probably made something wrong, because I don't understand why it triggers animation and why, on click on one of boxes, they are not moving together.

I was hoping somebody might be able to help with a little GSAP issue I'm having 🤞 Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!

Hey guys I have a very weird issue happening. First I was trying to create a CodePen but I can't replicate the issue there. I created a simple code example, so I have a tween on a timeline and I need functionality when the tween starts, the problem is that the onStart() function being trigger twice for some reason. First I thought that my function was being called twice but that is not the case. I did some research and I found similar issues but way back. Since I don't have a codepen to show, this is the example code that I have nextSlide(){ console.log('enter function') gsap.timeline() .to(this.ImageSections[this.currentSection], { onStart: ()=>{ console.log('enter OnStart() Timeline') } }) } And this is the console log. So I can see my function is being trigger once, but the onStart() is being called twice for some reason

I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label. const zoomData = [ {scale: 1, origin: [0.5, 0.5] }, {scale: 18, origin: [0.685, 0.38], steps: [ { type : 'in', el : '.location_1', }, { type : 'out', el : '#text', }, { type : 'out', el : '.location_wrapper .section-title', }, { type : 'out', el : '.location_wrapper .andaman-key', }, { type : 'in', el : '#htxt', }, ], label : 'empty' }, {scale: 1, origin: [0.5, 0.5], steps: [ { type : 'out', el : '.location_1', }, { type : 'out', el : '#htxt', }, ], label : 'havelock' }, {scale: 18, origin: [0.500, 0.78], steps: [ { type : 'in', el : '.location_2', }, { type : 'in', el : 'svg #ctxt', }, ], label : 'chidiyatapu' }, ]; I have this object which is responsible for setting up the animation. It is used by the following Js to add it to the timeline. zoomData.slice(1).forEach(data => { if(data.steps) { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }); tl.addLabel( data.label , "<"); data.steps.forEach( step => { if(step.type == 'out') { tl.fromTo(step.el, { autoAlpha: 1, display: 'block', }, { autoAlpha: 0, display: 'none', ease: "power1.inOut" }, data.label ) } if(step.type == 'in') { tl.fromTo(step.el, { autoAlpha: 0, display: 'none', }, { autoAlpha: 1, display: 'block', ease: "power1.inOut" }, data.label + "+=20%" ) } }) } else { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }) } }); }); How can I make the text, Our Centers, Andaman Island and `#text` fade away when I am first time zooming inside.

I'm trying to make a simple slider that animates-in then out one slide after the other according to the currentStep variable, which gets incremented by 1 at the end of every slide, but nonetheless , I end up getting the same slide over and over again and can't figure out why...

Hey guys, I have a problem and I can't find a solution on the TextPlugin documentation. I have this section that is going to have text (the text is coming from a WYSIWYG so it's going to have a lot of HTML tags) and I need to create like a typewriting effect, the text is going to start from the bottom and is going to go up. I added a video so you can see the effect I'm looking for, the problem is that on the video it doesn't show that, but I need to animate individual characters. I was testing the plugin but I don't see a lot of properties that I can use to create this effect, so is it possible to do it with this plugin? Or should I be using something else? I added two examples on the codepen, on one I get the animation but only for the lines, no the characters. And on the second example I only get the last line animated, can't make to other text to appear Screen Recording 2021-06-29 at 18.22.21.mov

Hello, sorry if this is a dumb question, I think is more easier that what I'm make it out to be. I have a rada graphic and I need to show multiple colored areas but I need to create a "scale in & scale out" (sorry for the phrase, I don't know exactly how to call this type of animation) animation for every single area, so when I show one I have to scale out before the next one.

I'am trying to create an image gallery, where images flow on z-axis. I am able make image div to flow on z-axis using scrolltrigger. But what I wanted, was to control the opacity of div to go from 1 to 0 when the image div (class name as "square") is close to camera/ viewport (for this code it is z = 700) so it will have a fade effect. In short whenever any one of these five image div goes z = 700 the opacity should be 0 . In style.css I've used perspective attribute for 3d perspective which will allow me to have images to flow on z-axis. I got this idea from awwwards.com original concept for reference: http://ab-architects.nextpage.agency/public/ I am trying to create gallery like this but cant figure out how to control the opacity in between the timeline animation... any suggestions on how I could achieve this effect using timeline and keep the scrolltrigger. Thanks in advance

Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox) I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. Many thanks for your help!

How to avoid the "jump" of the main circle "#usHome_1" at the end of the timeline? I'd like to have the same position for both circles at the start and at the end of the timeline.

This is a general GSAP/JS question. In this example, when the user hovers over each image, a short gsap timeline is played. Because there are 4 separate images there are 4 separate timelines/event listeners calling elements' specific id's. Because all 4 elements have a same class property is it possible to create one timeline and one event listener for all elements with this class. (So when slight adjustments to timeline are made, I don't need to copy and past for every element that uses the same animation?) When I try this only the first one works. Hopefully this makes sense, I can explain in a different way. Thanks!

I've seen various threads and blog posts about using lagSmoothing() to prevent animations pausing when switching screens. Every time I try to implement solutions, I get either ___ is not a function or not a method, or cannot read property ___ of undefined or something to that effect. Here's the base animation: useEffect(() => { const timeline = new TimelineLite(); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've tried adding a TweenLite instance, like recommended here and elsewhere useEffect(() => { const timeline = new TimelineLite(); TweenLite.ticker.useRAF(false); TweenLite.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've also tried adding the fn directly to my timeline instance: useEffect(() => { const timeline = new TimelineLite(); timeline.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); And have also tried with the updated gsap.timeline() syntax from this Stack OVerflow post. Does anyone have an example of how lagsmoothing should be used with a timeline instance?

Hey! GSAP community, I'm a new guy here and Loved the GSAP features. But I'm facing issue while using timeline reverse() in my react project. here is my codesandBox's Link => https://codesandbox.io/s/determined-pine..... Let me explain the issue: Problem lies In MobileNav component, when using timeline reverse method. I'm using ToggleMenu() method to change the state of isMenuOpen, and according to that executing tl.play() and tl.reverse(). tl.play() works fine but tl.reverse() not. Help Me. A comment is also added there in file where I'm facing issue Note:- Please Open the preview of website in new tab and resize around 400px as I'm using matchMedia to show different component version of Navbar, Otherwise .