Search the Community
Showing results for tags 'Animation'.
-
Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M. -
Hi everyone, I am new in here. My employer wants me to create a page which has an animated background exactly like the grid in this web, whose grid is moving like waves. They want to use different grid image but with the same effect. When I check the website, they use GSAP, hence why I am here. I have been reading the documentations, and so far haven't found any method to create such animation. If anyone can help me, that would be highly appreciated.
-
Hi there, I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections. I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far. Thanks in advance.
-
I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease . Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity. For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.
-
Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome? I really hope for your help.
-
Hello! Please help me. I have a sample code on Codepen https://codepen.io/victor_trunov_/pen/vYgKmwM I have the following problem: 1) I clean the Google Chrome browser cache on Android. 2) I open the page and move to the end of the page. 3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created. Please help solve it. P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.
-
Hi! I'm new here so bear with me ☺️ I want to create a animation where it feels like its kind of wavy (don't know how to describe it the best way) when scrolling down the page. I want to do it like on this website (the orange part). So I'm just wondering if anyone here has got a similar Codepen or something I could use to modify or maybe give me some tips & tricks how I should think? Appreciate all the help I can get ? Thank you in advance! /cheers from Sweden
-
Hello, I want to control a rocket image with a virtual joystick. I was able to create the joystick and rotate the rocket when the joystick is dragged (thanks to gsap's draggable plugin). However I am not able to change the rocket's position when the joystick moves. Basically, I want to make the rocket move as long as the user drags the joystick and change direction according to the joystick. I also want to increase the rocket's speed as the circle inside the joystick moves farther, but I suppose I can do that with timeScale() method. I tried changing rocket's position but it simply stops after some distance even though I am still moving the joystick. Any help would be very helpful since I am stuck on this since a long time.
-
The animation is not looping smooth/continuously because of the delay in the end. How can I make it not stop for a second in the end of the animation like it does on the Codepen?
-
It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can't solve it by my self. 2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working. Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent= Please contact me if you know the solution. -
Hello I'm new to GSAP animation. I add animation with jQuery it's working for the first time if you click on the " Green button " in the top right corner. I need to make the animation reverse also but when it's complete animation does not work second time. Please help Thanks.
-
Hi, I am quite new to gsap. One problem I have, is that when I reverse the timeline, or just make an animation, that scales something down. It leaves the outline on the element, multible times along the path in took. This makes the animation cumpletly useless, since it looks like crap. Im sure this is a bug, and can be fixed, but how? I've linked the file below. Thanks in advance :) test.html
-
Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time
-
Hi, I am a back end developer and have very least knowledge of JavaScript but I can understand code. I have been finding out whole day the code or logic used by https://travelshift.com/ they used to create top banner/slider which changes the slide/image by long click (about 1 second). I used chrome extension Wappalyzer and came to know that its using GSAP. I have been finding something similar but could not get any working code example. Can anyone please provide some similar example with code or any article link please. Also I want to know this animation name so I can google it better way. willing to get a response, thanks!
-
Hi all. This is my first post on the forum! I was hoping for some advice with a scroll based interaction I am working on. Essentially I have a fullscreen panel, containing a video and an H1 positioned on top (in reality I think the H1 will be an SVG logo). I am looking to have the H1's position on the Yaxis adjusted as you scroll down the page, effectively going in the opposite direction to normal, and disappearing from view out the bottom of its parent container. I have built this out the best I can so far using a gsap timeline and scroll event on the window. It all works as it should, it doesn't really feel great and can be a little jerky to begin with... so my questions would be... Is my approach suitable for this ? Are there any quick wins I could make to improve it? Or should it be done another way eg. scrollTrigger ? (No idea how to do this atm) Any advice greatly appreciated. Many Thanks!
-
I am trying to make a image slider, with same effects shown in the below video url https://youtu.be/VfIfy5fZLhM I have this code below: this.tl.from("#panel1", 4, {autoAlpha:0, ease: Sine.easeInOut}) .set("#panel2", {top:0}, "+=2") .from("#panel2", 6, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut}) .set("#panel3", {top:0}, "+=2") .from("#panel3", 8, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut}) I am trying to achieve the same image effect shown in the video [zoom in, out and second image is sliding inside]. Can someone please help?
-
Hi guys, I am new to GSAP animations, I love everything about this framework. It has made so many lengthy tasks very simple, short and fast too. But unfortunately I am stuck at one point. If you go to my codepen demo, when you click on 'button', you will see a stagger animation which is working fine. I have 6 boxes there and the 5th and 6th number boxes overlaps the 1st and 2nd. I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in.
-
create the bazier bath and card with rotate in globe so that it can create its path and rotate arround the globab like this in the pic how to create this ?
-
I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider = el}> {media && media.map((media, index) => ( <div key={index} className="slideContainer"> <div className="slide"> {media.slide && media.slide.map((slide, index) => ( <div key={index} className="img-wrap"> <Img key={slide.id} fluid={slide.remoteFile.childImageSharp.fluid} /> </div> ))} </div> </div> ))} </div> </section> ) } export default MediaGrid
-
Hey guys So i am making a project with gsap3 kind of like the apple airpod website I have like 500 + images and on scroll these images are being rendered in the canvas. I want to animate some text which will depend on the frame count the sequence is - frame ==0 animate in some text frame>0 animate out the previous text frame>10 again animate in some text frame>200 animate out the previous text so it goes... can some one tell me how can i do this in a efficient way. Thanks
-
Hello GSAP community, I am so incredibly impressed with ScrollTrigger - love it! Imagine multiple ScrollTrigger-based stories (eg, three characters), that offer different versions of a story. Upon scrolling to the bottom of the first story, the user is able to view the other two stories. Currently, the HTML looks something like this: <section class="person" id="person1"> <!-- stuff --> </section> <section class="person height-0" id="person2"> <!-- stuff --> </section> <section class="person height-0" id="person3"> <!-- stuff --> </section> With .height-0 having tried many approaches, but currently reading: .height-0, .height-0 div { height: 0px; overflow: hidden; } (display: none seemed to really break things, FYI) I have created a JS file that is attempting to break apart the different steps I think need to happen in order to switch characters: $(document).ready(function() { // WHEN USER CLICKS ON PERSON 2 STORY ... $("#chip-a").click(function() { // SCROLL BACK TO THE TOP $('html, body').animate({ scrollTop: '0px' }, 0); // TURN OFF PERSON 1 $("#person1").toggleClass("height-0"); // TURN ON PERSON 2 $("#person2").toggleClass("height-0"); // ACTIVATE FIRST ANIMATION IN STORY 2 $("#p2-sec1").addClass("activate"); // FETCH JS FILE CONTAINING PERSON 2 SCROLLTRIGGERS window.setTimeout(function() { jQuery.getScript("js/person2.js", function(data, textStatus, jqxhr) { console.log(data); // Data returned console.log(textStatus); // Success console.log(jqxhr.status); // 200 console.log("Load was performed."); }); }, 5); }); }); With person2.js containing the same types of ScrollTrigger elements (pins, CSS classes, GSAP animations) as person1.js. However, ScrollTrigger does then not behave as expected: the pin method, for example, does fire, but doesn't actually append position:fixed to the targeted element. The other animations don't work either, doing strange things like moving 3.4px instead of 500px. I am hoping someone can offer some clever help here. There is obviously something I've overlooked, as ScrollTrigger is still working/firing in my second Story, but not actually affecting items on the page. Unfortunately, I can't upload to CodePen at this time. Thank you in advance! I really look forward to sharing the final product here when finished.
-
I have build an scroll animation with a timeline and scrub, and I want to control it, with adding pause to it and with running multiple things at the same time. How can I do this?
-
Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
-
I am using BarbaJS for creating my Portfolio by using a <ul> for creating a Page-Transition. I have set up GSAP Animations and Many More such as AutotypeJS but they aren't getting fired neither are the CSS is getting applied after the Page transition is done. Once I refresh the page, The Animations gets fired. What could be the possible reason? gsap.from('.btn-blue', { opacity: 0, duration: 0.5, delay: 21, y: 50 }); gsap.from('.anim1', { opacity: 0, y: -100, duration: 0.5, stagger: 0.5 })
-
As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll. When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. Here is a simple example. Like the form on that website, I want my image but in the center of viewport. If you don't understand please let me know.
