Search the Community
Showing results for tags 'gsap3'.
-
First post here! I've read documentation, searched the forums and noodled around quite a bit before posting and I'm still stuck! So here's what I'm trying to accomplish. I'm sure it's super easy solution and I'm probably missing a minor step. I have a section of cards that are stacked and they're overlaying each other. When you click it the card div it pops up, if there is already an active card the previous one shuffles back into the stack and the new one pulls up. Here's my code that I have so far. It only shuffles them up and down without previous going back into the stack. const GetCards = document.querySelectorAll(".tools-card"); GetCards.forEach(function(cardList, index){ const cardTL = gsap.timeline({paused: true}).to( cardList, {duration: 0.5, x: "-=10", y: "+=250", scale: 1.05, ease: "expo.inOut"}) let activeCard = false; cardList.addEventListener('click', () => { if(activeCard === false){ cardTL.play(); activeCard = true; }else{ cardTL.reverse() activeCard = false; } }) }) I've tried several things like adding tags to the timeline and several methods() but I clearly don't know what I'm doing! Some guidance would be stellar. Thanks in advance.
-
const cardsRef = useRef(null); useEffect(() => { const cards = Array.from(cardsRef.current.children); const timeline = gsap.timeline({ defaults: { duration: 3 } }); gsap.set(cards, { opacity: 0, x: 500 }); cards.forEach((card) => { gsap.to(card, { x: 0, opacity: 1, duration: 1, ease: "ease-in-out", scrollTrigger: { trigger: card, start: "top 60%", end: "+=400", scrub: true, }, }); }); }, []); Here is the code I am working with Next.js the the start market is going above the element and when we inspect the element it comes to the place first image is without inspect when first page load notice markers when we inspect the marker comes in place why it is happening please help this is my first post apologies for any if the post is not according to guidelines
-
Hi there, So I am creating animation and kind of stuck. I don't know how to reverse the animation when the end of the targeted elements hits the bottom of the screen. Please let me know how can I able to achieve this. Thanks, Nafiul
-
Hi Guys. I have replicated my issue in CodePen but you can not see the issue unless you view it in a mobile browser without CodePen wrapping it. So to show you, I have placed the same code that is in the CodePen in a html version as a visitable link. https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.html The issue is: after scrolling past the scrollTrigger area the page jumps up. I have also created a screen recording on/of my mobile showing and explaining the issue (ensure sound is on). https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.mp4 Thanks guys. ? -
hello guys, a quick question, I'm using Next.js 13, I'm using the native layout.js in which I've just added a Header and Footer component, so far nothing exceptional, I have my Header component in which I have a simple animation made with Gsap (useEffect). Everything seems to be working well, but the animation only works when the page is reloaded, not when I go from page to page (although that's not what I want) but, for example, after my preloader is played, no animation. If I take my Header component out of Layout.js and put it on my home page, the animation works normally. An idea of what I could do, the solution resists me. Thanks in advance
-
Hi community, I have been facing an issue with scrolltrigger animation when preventing the address bar from hiding in mobile. I have replicated my HTML structure in the below codepen demo. I just wanted to keep the address bar visible always and able to trigger the animations on scroll. After setting the overflow and position properties, the address bar is fixed now. But the scrolltrigger animations are not working as expected. The animations are getting triggered only using scroll wheel and not by touch swipe. -
I've tried for 3 days to figure out how to download GSAP+ Bonus Plugins, and I just feel like I kept going down a rabbit hole and coming out worse than when I started. ? Can someone walk me through the best option for installing this GSAP and its bonus plugin-ins properly? I have Cloudways Server-side rendering is when your own servers do the rendering instead of the user’s browser. The server processes the JavaScript framework of the website and renders it to static HTML and CSS, so that the end-user’s browser doesn’t have to. I found this plug-in that was recommended unless someone has a better option. https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-digitalocean-aws-etc ? I am a taking classes at Harvard Uni, but I'm at the premi stage of coding, most of my experience has been through wp with minimal coding. But I really want to install these plugins, so I can understand animations and I feel like this plug-in is my best option given I'm learning. Please let me know if you y'all recommend any other superior and user-friendly tools to dive into. Thank you!!
-
I am building react project with GSAP. I am trying to create an animated div that will scale up based on scroll. My animation works perfectly on codepen demo. But when implementing it in my project, it sets the markers wrongly. But when I change routes, and come back, the markers automatically get set perfectly. Please watch the video for better understanding, or go to this link https://ayank007.github.io/newportfolio/# Source code: https://github.com/ayank007/newportfolio/blob/master/src/components/Work/index.tsx in line 37 Can anyone please help me, what went wrong. Thank you. Untitled.mp4
-
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);
-
You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. enter the description of the image here so that when the user scrolls through the site, the image follows him and smoothly shifts under the text block, as if highlighting the text.
-
Hi, based on the horizontalLoop function -> https://greensock.com/docs/v3/HelperFunctions#loop DEMO WITH DRAGGABLE (with "center: true" and onChange features), I want to have the first element starting on the center as well, basically the center element changes based on the viewport size, but my goal is to start the animation with it in the center. Here is an ideia of what i want to achieve -> public-image.co Thanks!
-
I have some text with a gradient in it and I was wondering how I can fade it in without having it snappy like in that codepen? Thanks, Tod
-
I am having a problem with the timings in the Timeline, The cause is either me being stupid or an error in the timings system. the red button is supposed to go back to a green button all at once, but, it goes back segmented, and yes, I setup the timeline properly. here is the code: https://codepen.io/FaxForceFive/pen/zYLQoEN
-
I'm working on an animation effect where the items appear as an overlay to the previous element on scroll, but when I use animation to translate Y, it adds extra white space at the bottom, which I don't want. I also experimented with the scroll snap effect. But that didn't work either.
-
Please refer to the codepen and then third slide/section in the horizontal scroller. I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on. Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right. What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled. Thank you. ?
-
Hi Guys. I am new to GSAP, GSAP3 and scrollTrigger. I have been trying to implement some of the basics to learn how to use GSAP and ScrollTrigger. Please refer to the codePen. I am trying to make the letters (YEAH) in the first horizontal sliding section move up then down then up then down through the "scrubbed" animation. In other words, how do I make them go up and down multiple times instead of just the once. I have looked for examples and have been unable to find anything doing this. Can it be done?
-
Hello, I'm trying to animate an image with the help of Draggable. I have adapted this example https://codepen.io/GreenSock/pen/mdVEpKK with my dragger, I don't understand why it's not working. Anyone can help me to understand? Thank you!
-
My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)
-
Hi all, I have several problems with the animation of my book. 1. I tried to make a rotateY on my book but the controls did not work on my code (play(), pause(), paused()), so I make a rotate in CSS that I disable by adding or removing a class 2. The animation works perfectly on the first opening and closing cycle, but on the following ones the currentAngle variable is buggy 3. I would like to be able to click on the book only if the animation is finished Here is my code : https://codesandbox.io/s/sad-mcnulty-7k49my I really need your help ;) Thanks to all
-
I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up At my end its not working on scroll down but working fine with scroll up I have tried the following. import { useEffect, useRef } from 'react'; import { gsap, Power1 } from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; function WeHeard(props) { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const animation = gsap.timeline({ scrollTrigger: { trigger: ".hearedListing", scrub: true, start: "top 10%", end: "bottom top", markers:false } }).from('.hearedListing li', { x:300, autoAlpha:0, duration:4, stagger:2, ease: Power1.out }); }, []); return <> <section className="heared-listing hearedListing" > <div className="container"> <div className="row"> <div className="col-md-12 text-center"> <h2 className="animate-heading">We heard</h2> <ul className="list-unstyled primary-text-color h4 mt-5"> <li >Here is my line one</li> <li >Here is my line two</li> <li >Here is my line three</li> <li >Here is my line four</li> <li >Here is my line five</li> <li >Here is my line six</li> <li >Here is my line seven</li> <li >Here is my line eight</li> <li >Here is my line Ten</li> </ul> </div> </div> </div> </section> </> } export default WeHeard; I am created a codesandbox here -
I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning ?. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks! -
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
-
hello everyone, i have created this codepen to swap text in the sticky box for each sections. and used scrollTrigger for each. if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts. thank you.
-
Hi Everyone!, I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP. It is very similar to this other codepen (https://codepen.io/justjoinednow/pen/MWVBQZg) Thank you
-
Hello, tommorow I should show this gallery to some important people. The problem is, why on trigger 4 camera rotates 7 times around its axi? how can I solve it?
