Search the Community
Showing results for tags 'timeline'.
-
I made an animation of horizontal scrolling, it works fine on a computer, it works poorly on mobile phones, when scrolling, it scrolls in one direction to the end, after which it stops animating. let galleryScene = gsap.timeline(); let item = gsap.utils.toArray(".gallery__item"); const galleryTriger = new ScrollTrigger.create({ animation: galleryScene, trigger: ".photo-gallery", start: "top top", end: "+=" + 600, // markers: true, scrub: 1, snap: 1 / (item.length - 1), pin: true, ease: "none", }); function getMoveDistance(){ let move = document.querySelector('.gallery').scrollWidth; let block = document.querySelector('.gallery').offsetWidth ; move = (move - block) * -1; galleryScene.clear(); galleryScene.to(".gallery", 25, {x: move}) } getMoveDistance(); window.addEventListener('resize', getMoveDistance, true);
-
I have a gsap timeline, which I trigger on hover and play it reversed on mouseleave. However I need to change the easing when I play the timeline reversed. Is there a way I can do this without duplicating the whole timeline again? Here is a stripped down example, full example is in the codepen. const ease = 'power2.out' const tl = gsap.timeline({ paused: true }) // tweens here... card.addEventListener('mouseenter', (e) => { tl.play() }) card.addEventListener('mouseleave', (e) => { // need to somehow change the easing to 'power2.in' here tl.reverse() })
-
Hello, I'm trying to create a carousel that spins when a button is pressed. I want it to initially ease-into the spinning animation, then spin at a constant speed for an indefinite amount of time (while the code is waiting for a response from the back-end) and lastly ease-out of the animation during a final spin. I tried creating a timeline and adding the 3 animations to it but the middle animation (with it's repeat set to -1) gives me trouble. I haven't found a correct way to go from the second to the third animation. I tried killing the second animation expecting the timeline to proceed to the final animation but that causes the carousel to abruptly stop. So if there was a way to stop the "infinite" animation in a timeline and proceed to run the next animation that would be very helpful. Alternatively a way to repeat the second animation without setting repeat to -1 could also work. Any help is greatly appreciated. -
Please help me figure it out. If you scroll to the end of the page and resize the page, the start positions of the timeline are determined incorrectly.
-
When creating a timeline for parallax images on scroll, my images only animate on-by-one rather than all at the same time. This is my code: useLayoutEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { pin: true, trigger: main.current, start: 'bottom bottom', end: 'bottom top', scrub: 1, markers: true } }); tl.fromTo(parallaxImage1.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage2.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage3.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage4.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage5.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage6.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage7.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); }, main); return () => ctx.revert(); }, []); What am I doing wrong? -
I have a useEffect hook which does some animations which goes like this - useEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline(); tl.from(".hero-text", { opacity: 0, x: "-5vmin", delay: 1, duration: 1, ease: "expo.out", stagger: 1, }); tl.to( ".hero-text", { letterSpacing: "0.1em", stagger: 0.9, }, "-=2.5" ); }); return () => ctx.revert(); }, []); I have another animation that I want to run after this animation has ended, but if I add it inside the same useEffect hook it'll make the code a bit messy. I can definitely have a completely different useEffect hook and write the animation there but that way I won't be able to use the timeline defined for this animation. Currently I am just using a delay but I feel like that ain't the best way of achieving the result I want. Is there a way I can add an animation to the same timeline while making sure that the code ain't really messy. Can contexts help in this? Having the animations inside useEffect ain't necessary for my purpose so am open to any sort of suggestions that can be implemented in React, or specifically NextJS. -
I have a div called fade and span called caption, I want GSAP to change the background color of fade and inner text of caption This code is changing the background color of element fade but it does not do with the element caption gsap.registerPlugin(TextPlugin); const colors = ["black", "#4d0000", "#800000", "#330000"]; let captions=['some text','some text','some text','some text']; const tl = gsap.timeline({ repeat: -1 }); for (let i = 0; i < colors.length; i++) { tl.to(fade, { duration: 0.4, backgroundColor: colors[i] }); tl.fromTo( caption, { text: { value: captions[i] }, opacity: 0 }, { duration: 3.5, opacity: 1 }, "<" ); } why the caption text is not changed although the background color is changed normally ?
-
Hi GSAP Forum, I've been looking at GSAP for a while now and I cannot find a general solution to a problem i've been trying to address for some time now. My site needs to comprise of 8 sections, that use the native vertical scroll in the browser. Each of the section has a timeline associated to it, in which, the previous section transitions into the next section. The second requirement is that each timeline can vary in length e.g: section 1 takes 10 seconds to transition into section 2 section 2 takes 8 seconds to transition into section 3 The main caveat is that the user is restricted to only scroll once i.e. one mousewheel move, one keypress down or one drag on the scroll bar, in which they will have to wait until the animation/timeline completes for them to be able to scroll again. Can anyone offer a solution or a pointer to a solution? I'm currently using react and gsap Many Thanks, Chris -
So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here
-
hi, I have a big problem after updating the gsap library from 3.6.1 to current version. In the first case (version 3.6.1) everything work fine, but in the current version is a problem with scroll after firing animation, only the first animation works correctly but the next animations after firing it moves scroll to top (it is big jump ~100vh). On iOS mobile devices, the first and second solution working well and this problem not happend. I prepared two codesandbox, the first is with version 3.6.1 (next 11) and the second with the current version (gsap: 3.11.4, next: 13). I tried update next in my project but problem is the same and next version is not important in this case. If someone want to test it please test on mobile, because in devtools everything is ok. Codesandbox gsap 3.6.1: https://codesandbox.io/s/gsap-3-6-1-47r3qv Live: https://47r3qv.sse.codesandbox.io/ Codesandbox gsap 3.11.4: https://codesandbox.io/s/gsap-3-11-4-6fn5m0 Live: https://6fn5m0.sse.codesandbox.io/
-
Hi there, I am looking for an opinion on some ScrollTrigger functionality. I am creating a horizontal timeline which I don't want active until a user clicks on a button to make it active - this timeline could have many years and I only want it to work if a user interacts. The issue I am having is creating the ScrollTrigger on click, there is a layout shift (to be expected). There is a starting/intro panel where the button is which is 100vh/100vw and was going to clone this to act as an overlay until the ScrollTrigger has been created to hide the layout shift, but not sure this is a suitable solution. I tried pairing this with enable/disable, but on load the pinSpacing exists which isn't what I want when I need it to be disabled, but also the pin divs gets added/removed too which also causes another layout shift (again to be expected). Now I can go for the panel overlay route to hide the creating/shifting until it's ready, but I was wondering if having my scrollable content in a modal which only appears when the user clicks is a better solution. I see there is a .scroller property which may be handy, but not sure on the best way to use it in a modal for example. Are there any examples of how this can be implemented? Thanks in advance! Jack
-
Hello hello! I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal. I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top. - If reaches the bottom, the scroll is positioned in the top - If reaches the top, the scroll will be positioned in the bottom of the page This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll. Looking into the examples I found this loop: https://codepen.io/GreenSock/pen/LYRwgPo It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept. One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time. Any idea how I could apply the same loop concept to my need?
-
Hi GSAP-Community, I hope that someone can help me out. I'm fighting for some hours with a problem. I'm working with multiple timelines that are beeing created by seperate functions that return a timeline. Then I'm adding them into the mastertimeline with the .add method. I want to start the first and the second animation at the same time, but nothing works, I already have read all documentations. These two i would like to start at Position Parameter 0: mainTimeline.add(box1_2(),0); mainTimeline.add(benefit_paragraph(),0); Best regards, David -
Hi there, does anyone know how I can bind that slider I createt using dragdealer to a lottie animation? I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation. I would really appreciate any help, thanks. -
Hey guys, I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g. Thanks for your help
-
I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically. When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once. I read the DOC, but I didn't get anything, maybe I didn't read it correctly for(let i = 0 ; i < heroSlides.length ; i++){ tl.to("#Tear",{ delay: 0.3, duration: 0.5, attr:{d:heroSlides[i].path,}}) .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`}, delay:0.75, },"-=0.3") .call(changeBoxes, [i],"-=0.4"); } const scroll = ScrollTrigger.create({ trigger: ".module", pin: true, scrub: true, start: 'top top', end: "max", animation: tl, // markers: true, pinReparent: true, fastScrollEnd: false, }); scroll.scroll();
-
I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();
-
Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html
-
I feel like I may be overthinking this... ? I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something? -
Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects, but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way. What am I doing wrong? Thank you in advance, Matteo.
-
Hey! I have a custom timeline UI (similar to the timeline in adobe after effects) where you can set keyframes for different properties like position, opacity, scale etc. I want to save those keyframes in a format like this { time: 1, value: { x: 100, y: 0 }} for the position and add them to the timeline animation. `time` is the position in the timeline where the element should have the x and y in `value`. I just can't figure out how I would set up the code without any additional calculations for the duration. Currently I have a timeline which should be always 3 seconds long and keyframes should be added to that timeline. This code just doesn't feel correct in my opinion because I would need to set the duration manually for each keyframe by checking if there is a keyframe before the current one and then using that time to calculate the duration. const timeline = gsap.timeline({ repeat: -1, duration: 3, paused: true, onUpdate: () => { // update UI } }) const prop = { x: 0, y: 0 } timeline.add( gsap.to(prop, { keyframes: [ { x: 100, y: 100, duration: 1 }, { x: 0, y: 0, duration: 1 } ] }) ) I hope it's understandable because I don't know how I should explain it well. Sorry for that! Can you please give me a hint how I would do this with gsap? I appreciate any help and advice! For reference: I want to "translate" a view like this into "gsap code".
-
Welcome back to our getting started guide. If you haven't read part one, you can find it here. Let's continue with timelines... Timelines Timelines let us create adjustable, resilient sequences of animations. Below is a simple timeline containing three tweens. By default, things are added to the end so they play one-after-another. // create a timeline let tl = gsap.timeline() // add the tweens to the timeline - Note we're using tl.to not gsap.to tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1 }); tl.to(".orange", { x: 600, duration: 1 }); -
Hi there, I'm new to gsap and have been following the docs but I'm struggling with the scrollTrigger function. The timeline function to animate '.industry-card' works fine but the animation is happening prior to reaching the trigger '.industries-section' Would love some assistance TIA https://codesandbox.io/s/scrolltrigger-struggle-7qtcms
-
Hi, I tried to use a timeline with scrollTrigger and it worked well. const sections = gsap.utils.toArray('.item2'); gsap.timeline({ scrollTrigger: { trigger: '.wrapper', start: 'center center', pin: true, srub: 1 } }) .to('.item1', { top: 50 }) .to(sections, { x: 50 }) The problem is that there is four items in *sections* which will cause a fast scroll speed on them and makes it look awkward because of the *scrub 1* and I wanted to use *scrub 4* on them. So I changed the code to this. gsap.timeline() .to('.item1', { top: 50, scrollTrigger: { trigger: '.wrapper', scrub: 1, pin: true, start: 'center center' } }) .to(sections, { x: 50, scrollTrigger: { trigger: '.wrapper', // I want to use a custom scrub here scrub: 4, pin: true, start: 'center center' } }) But then another problem occurred which caused the timeline not to be working properly. How do I set a custom scrub on an element without blowing the timeline?
-
Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. I have and example but it looks like the animation is starting from the center, and not from right to left. I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option. Any help would be appreciated. Here is an example of the animation I'm trying to do Screen Recording 2022-07-05 at 15.20.17.mov
