Search the Community

Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach the section "3" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I don't have a minimal demo because my website it is very advanced, but I have a codepen that I used as a guide. I will appreciate any help from you guys! Thank you very much.

Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach from section "2" to section "4" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I will appreciate any help from you guys! Thank you very much. I drop here a minimal demo of the problem.

Hello everyone, I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component. The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen. I'm including the relevant code snippet from my component for reference: import React, { Fragment, useRef, useLayoutEffect } from "react"; import "./style/main.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function Main() { const app = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { var tl1 = gsap.timeline({ scrollTrigger: { trigger: ".box2", start: "0% 50%", end: "50% 50%", scrub: "true", markers: "true", }, }); }, app); return () => ctx.revert(); }, []); return ( <> <div ref={app} className="App"> <div className="box1"> <div className="box">selector</div> </div> <div className="box2"> <div className="boxx">selector</div> </div> </div> </> ); } export default Main; Css for this component is body { background-color: var(--dark); color: var(--light); font-family: "Signika Negative", sans-serif; margin: 0; padding: 0; height: 100vh; } .box { position: absolute; width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--green); font-weight: 600; color: var(--light); transition: cubic-bezier(0.165, 0.84, 0.44, 1); } .App { display: flex; align-items: center; flex-direction: column; justify-content: space-around; min-height: 100vh; } .box1{ background-color: #ffffff; height: 100vh; width: 100%; } .box2{ background-color: #5900ff; height: 100vh; width: 100%; }

Hi there! I need some help from you guys. I'm trying to apply the effect in the codepen demo, I have two sections (that contains each one a carousel) and I want the second section cover the first section on scroll (same funcionality as the demo but only with these two sections). I'm writing the scroll trigger code in the first carousel component (don't know if this is the right approach), the problem is that when I try to use the "pin: true" property, my first carousel dissapears or moves to the bottom of my app. I don't have a codepen because I'm using React but I made a codesandbox example in this link: CodeSandbox Link Thank you so much!!

Hi all, I am trying to create an effect in which I can loop through all sections of a page and make them all overlapping. This is for a site where I don't know how many sections there are per page, since that can change. The effect in my codepen is almost what I want, but ideally section 1, 2 and 3 should all be overlapping at the end of the page. I have tried using "pintype: ''transform" ad setting the pinspacing to true but to no avail. Can anyone help me with a solution?

I'm building a site using the Astro framework, where there will be video animations on scroll. Unfortunately using this framework it is not possible for me to create a demo on CodePen but I recorded a video to show the problem (here is the link to the site in production). The problem is that sometimes when I refresh the page the second section overlaps the first after a slight scroll (you notice when the error occurs because you see the "start" marker of the second section just below the first section, and therefore before the "end" marker of the first section). In the video, from seconds 01 to 07 the site loaded ScrollTrigger correctly, while from second 08 onwards, after the refresh, as you can see, the second section ends above the first, before it can finish scrolling. Do you have any idea what it could be even without having a demo? is this a known scrollTrigger issue or can it be caused by the framework? This is the index.astro: --- import Layout from '../layouts/Layout.astro'; import VideoScroll from '../components/VideoScroll.astro'; --- <script> gsap.registerPlugin(ScrollTrigger); </script> <Layout title="TUC"> <main> <section class="container relative min-h-screen py-6 mx-auto" id="home"> <VideoScroll client:load section={1} main="Hello TUC" title="LOREM IPSUM" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." video="/video/esploso_edit.mp4" /> </section> <section class="container relative min-h-screen py-6 mx-auto" id="technology"> <VideoScroll client:load section={2} main="All in one" title="LOREM IPSUM" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." video="/video/sedile_edit.mp4" /> </section> </main> </Layout> And this is how I created the components (.astro): --- export interface Props { section: number; main: string; video: string; title: string; description: string; } const { section, main, video, title, description } = Astro.props; --- <script> class VideoScroll extends HTMLElement { constructor() { super(); // Read the message from the data attribute. const section = this.dataset.section; const IntroVideoRef = document.getElementById(`section-${section}`); const videoRef = document.getElementById(`video-section-${section}`); videoRef.onloadedmetadata = function() { const pauseVideo = () => { videoRef.removeAttribute("autoplay"); videoRef.currentTime = 0; videoRef.pause(); gsap.delayedCall(4, () => ScrollTrigger.refresh()); } if (videoRef) { pauseVideo() } const videoDuration = this.duration; ScrollTrigger.create({ trigger: IntroVideoRef, scrub: true, pin: IntroVideoRef, start: '-100', end: `+=${videoDuration * 300}`, markers: true, onUpdate: function(self) { if (videoRef) { const scrollPos = self.progress; const videoCurrentTime = videoDuration * scrollPos; if(videoCurrentTime) { videoRef.currentTime = videoCurrentTime; } } }, }); console.log(videoTime) }; } } customElements.define('video-scroll', VideoScroll); </script> <video-scroll data-section={section}> <div class='w-full h-full hyperboards-container min-h-[200px] md:min-h-[300px]' id={`section-${section}`}> <div class='flex justify-end w-full translate-y-[30px] lg:translate-y-[70px]'> <h2 class='text-4xl font-bold md:text-7xl text-grey'> {main} </h2> </div> <div class='grid grid-cols-1 gap-4 md:grid-cols-12'> <div class='w-full col-span-1 col-start-1 overflow-hidden rounded-xl video-col md:col-span-7 md:col-start-2'> <video muted playsinline autoplay disableRemotePlayback id={`video-section-${section}`} class="min-h-[200px]"> <source src={video} type="video/mp4"/> </video> </div> <div class='col-span-1 section-text md:col-span-4'> <h4 class='bold text-[25px] text-white'>{title}</h4> <p class='light text-light-grey'>{description}</p> </div> </div> </div> </video-scroll> <style> .section-text { display: flex; flex-direction: column; justify-content: flex-end; } </style> You will probably have to refresh a few times to get both versions (working and not working).

I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.

Hi, I am new to GSAP. I try to do overlapping setions with menu. Everything works like I expected expcept menu anchor links. If I am on the top of the page and I click on some link. everything works perfect. Problem is when I am at the bottom of the page and I click on some link in the menu. It takes me to the right section but this section is overlapped with section before. My idea was somehow reset or unpin section when leaves from the viewport, but I cant find the right code for it. I tried to find any solution on forum, but all topics what I have found solve more complex problems, but none can be used for this easy task. Thank you for your ideas.

Hi everyone, I am new to GSAP. trying to create a Shrinking header animation. I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..

Hey, I have a question with an animation I'm doing. I have like text message bubbles and when you scroll they need to appear but when the bubbles are near the end they start overlapping each other. How can I make them keep the same space during the timeline?

Hi guys, I built a page with multiple animations using GSAP and ScrollTrigger, this is the page Open Screenplay. The animations are very good but I need to add transitions between the sections but I don't how I can do it. The transitions that I need to apply are bounce transition like this https://connect-homes.com/process and overlap transition like this http://www.espn.com/espn/eticket/story?page=Dock-Ellis. Thanks in advance.

Long time user and a big fan of GSAP Usually I can figure out issues on my own, but this time I'm really stuck. If you refresh the Codepen, you can see that the first animation is the text zooming in slowly, and then zooming out quickly after a brief delay. Now after all the animation is done, I added a tl.restart(); so that it will go back to the start and replays everything, but this doesn't seem to be the case. The text animation is now only appearing instead of the whole zooming in etc. Where did I go wrong??? o.O

Hi ! It's possible to achieve the scroll effect in this page (this page use scrollmagic and greensock.) http://www.locus-solus.it/en/pouffe_gae_aulenti The elements continue their animation after scroll is stopped. I dont know if I could achieve this with greensock tween settings or the scrollmagic one Thanks!

Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep the elements from starting and ending at the same place in the window with this css property applied?

Hello Again The following works nicely var tl = new TimelineLite(); var $frame1 = document.getElementById('frame1'); var $txt1 = document.getElementById('txt1'); var $txt2 = document.getElementById('txt2'); tl.set($txt2, {opacity:0}) tl.add( TweenLite.to($frame1, 1, {alpha:1}) ); tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) ); tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) ); tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" ); tl.play(); It works: my last timelinelite addition happens with intended overlap. But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work: tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") ); I tried with a few different values just to make sure it is not the numbers. Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite. Thanks again .S, over coffe

I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?

Hi, firstly - many thanks for great GSAP suite. I'm using it for first time and that's really easy to set up. I have just one question about restart the animation/timeline. I have 2 timelines and both animate different element and that's just fine. Animation is good and if you refresh the page everything looks correct. But if you click on Repeat button animation starts in 0.5 seconds so you can't see, that text is not coming to content (to specific position - from 0% to x%) but appears in content (apperas in x%). I noticed that it relates to overlapping ( 4th parametr in method to() ) if I delete the overlapping (mine is "-=0.2") restart is fine but not the move of the text. It arrives from sides and stops (for a few miliseconds) and then continues correctly. But I need smooth move so I used the overlapping but it cause problem with restart... I created a demo on CodePen - http://codepen.io/anon/pen/tDGiz?editors=001 I dont know what to do with it and I would be thankful if you could help me. Thank you. P.S.: Sorry for my english :-\

I have three tweens, each one with a sound effect called on start: //simplified code: TweenMax.to(this, 10, {alpha:1, delay:1, onStart:playSound1}); TweenMax.to(this, 10, {alpha:1, delay:2, onStart:playSound2}); TweenMax.to(this, 10, {alpha:1, delay:3, onStart:playSound3}); function playSound1():void { LoaderMax.getLoader("sound1").playSound(); } function playSound2():void { LoaderMax.getLoader("sound2").playSound(); } function playSound3():void { LoaderMax.getLoader("sound3").playSound(); } I would like the sounds to overlap, but instead, the first sound is cut off by the second, which in turn is cut off by the third. Can I get all three sounds overlapping? Is there a way to access the loaded sound object & play it through a separate channel manually? Thanks