Search the Community
Showing results for tags 'gsap3'.
-
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
-
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.
-
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);
-
(Small)(1).thumb.jpeg.15e42ae49445b8bada9d0a027e685017.jpeg)
I've been scouring the archives and the web but can't seem to find out a proper workflow using Adobe Animate and GSAP if there is even one or is it even worth it. I am working off some files that were done by another developer and they seem to have used Adobe Animate for the HTML portion of is and then GSAP for the actual animation. I have been trying to break down how they managed to use both and can't seem to make it work in my head because everything that I pump out of Adobe Animate has a js file that is way overloaded with symbols and such. As I've mentioned elsewhere I am trying to get back into using GSAP so I am rusty as all get out. I may be asking the wrong question so there's that too! Any help would greatly appreciated. I guess I am missing the link between how to go from Animate to GSAP. Does the GSAP happen within the Animate file? Or is published and then coded. -
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.
-
Hi, I'm very new to gsap and been trying to do this layout today but without any luck. In the pen you can see 4 items to the left, what I'm trying to achieve is to pin this items in the left and change the content in the right with the relevant one. the pen js is very small is where I started and i have been trying different things but I don't know if im going in the right direction I highlighted one of the items as an example of the result I'm looking for, when you scroll past certain offset the element goes to active and the content that shows is the relevant one, in this case, Ipsum would show Thank you very much if anyone can point me in the right direction.
-
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
-
Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ? I will post a codepen later as I started my project directly in local. Thank you
-
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! -
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 have a simple project with Angular 7 using GSAP 3. That's it works perfectly with comand 'ng serve' and 'ng build' of Angular CLI, but when I use the comand 'ng build --prod', the application throws the following error: "Uncaught TypeError: Cannot read property 'easeIn' of undefined". I think the problem just happens in AoT build mode of Angular. Could someone help me with this? Thanks!!
-
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.
-
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
-
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?
