Search the Community
Showing results for tags 'gsap'.
-
Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
-
I was going to purchase the Business Green plan. Does it mean that it will only have single developer but can I use it onto multiple site?
-
Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.
-
Hi Guys, I hope you could point me on the right track to be able to make a animation in and reverse approach on this current pen that I attached. My goal is when I enter the section which will be active I wanted to animate all the elements inside (that I can do). My problem is reversing the animation before leaving the current section. Anyway, as you can see on the pen its a scroll wheel transition. Best Regards, Mikhail
-
Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
-
Hi Guys, I hope you can help me to fix the over scrolling on this slider. I forked this slider animation from @Ihatetomatoes tutorial. And added a mouse-wheel function that makes it scroll up and down using the existing function that Peter use but what I want to achieve is not to over scroll(not the infinite scroll) it to other section. And even if I hot scroll the wheel it will just snap onto the next slide. Best Regards, Mikhail Villamor
-
I put my code in codepen but it don't seem to work and I don't know why. Anyway my problem is when I scroll down to see the next slide the image don't fade to the next one but when I scroll up to see the previous slide it does. Any idea ?? I'm new to the greensock universe so don't be to rough with me. Thanks guys !!! -
Hello! I'm pretty new and still learning GSAP, which is pretty awesome and powerful. I've been working on a horizontal website so as you scroll, animations are being triggered based on the scrolling position. I've combined GSAP with Scroll Magic to achieve this. You can see the site here - http://maric.launchcatapult.com/ I have 5 main sections Home, WePartner, WeAdvise, WeServe, and WeEmpower. I've created a cross over transition, which you can see towards the end and after all of the animation is completed of the "We Partner" section. During this cross over transition animation, how can I make the timeline jump to the very start of the next section, which would be the "We Advise" section then continue on its animation from there? Another example that I've been looking at is from http://tram-house.com/. After you insert the key into the hole, they have that circular transition, then after that animation is complete it takes you to the beginning of the next section (also provided screen shots). Can any one direct me onto the right path to achieving this same thing? I know the tram-house.com site is using a canvas instead, but I know little to none about how to animate and draw shapes within canvas. That's why I'm just tweening svg shapes instead. Thanks!
-
It is not possible to select and copy full link.
-
Hi, I am new to GSAP. Hence I need to know how to integrate GSAP to PIXI.Container. Basically, I need to move the container out of focus by -GAME_WIDTH Like, TweenMax.to(container.position, 1, {x:-GAME_WIDTH}); Thank you.
-
Hi, I've hit an interesting problem using delayedCall/killDelayedCall I've got a number of classes which, typically should run consecutively, but, can run concurrently. The classes are loading a video, and then when this fires its complete event, a delayedCall is used to activate the next part (usually loading an associated MP3). But, as the class/video can be skipped and should that happen I won't wont the next part to be activated, I use killDelayedCall to stop it. What I've found is that not only will the delayed call be stopped from the first class, but from any other that are running that delayedCall. I've not gone through the GSAP source, but, I expect that killDelayedCall is removing all references because it's using the name of the function rather than some unique reference. So, is there a way to avoid this? (I have a fix, it's just a bit ugly.) <edit> I just checked and I'm using v1.19 - not sure if upgrading to v1.2 would help? </edit>
-
Hello GSAP community, I am trying to play 2 timelines one after the other. when timeline 1 finishes, immediately play timeline 2. After lots of trying and reading the forum, I still haven't found a solution yet. My problem is when I get some panels open and I click on the menu button, I want the open panels to slide back then immediately animating all the panel to go offscreen So far I need to click twice on the menu button for this to happen I am using a master timeline, as i understand is the way to do such things. what do I do wrong in the master timeline? why are the timelines not chaining? Sorry the code is a bit messy but I’ll work on refactoring soon, however, any tips will be welcome Thanks a lot
-
Before jumping into Club GreenSock for the super-cool bonus plugins, perhaps you're plagued by questions like: Will the bonus plugins work well for my project? How difficult is the API to work with? Will they play nicely with my other tools? Will they work in Edge? Firefox? ... That's why we created special versions of the plugins that can be used on CodePen anytime...for FREE! The video below shows how to get up and running fast. Video Demo with quick-copy URLs See the Pen Try Club GreenSock Bonus Plugins FREE on Codepen by GreenSock (@GreenSock) on CodePen. Template (fork this): See the Pen GreenSock Bonus Starter Template by GreenSock (@GreenSock) on CodePen. Of course we offer a money-back satisfaction guarantee with Club GreenSock anyway, but hopefully this helps give you even more confidence to sign up. CodePen is an online, browser-based editor that makes it easy to write and share front-end code. If you need help using CodePen check out their interactive editor tour. -
Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi
-
I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);
-
Has anyone worked with a library for scroll-based callback functions to use with GSAP in ReactJS? I've been working with a small library but I'm looking for a more robust solution and don't have the time to write my own. I'd rather not use CSS animations with popular libraries like AOS. The goal is to find a library that fires a callback function (which I would use to fire an animation function) when an element reaches a certain offset, exits/enters viewport.
-
When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript gsap.to("html", {"--myColor": "orange", duration: 1, yoyo: true, repeat: 20}); Demo Support for CSS variables was added in GSAP 1.20.0 -
I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.
-
I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) I'd like to achieve : - path { they should animate with delay, so I could have the feeling that they are walking. } - line {it's a stroke which should animate from 0 to 100%.} - polygon (are two arrow that should fade.) I hope it's something that you guys could quickly fix.
-
Hello everybody I am trying to convert, refactor a jQuery animation to pure GSAP. Using gsap.jquery gave several errors. Unlike in the guide written I found one always requires jquery still. I want to convert jquery.animate() to GSAP function. What links and resources are there to help me with converting Jquery to pure GSAP?
-
Hi all, I am very new to hand coding and using GSAP and have just got the hang of the basic principles of the tweens and timelines. My problem is I would like to animate a half background during the timeline and after its completed add a mouseenter that animates the same background to the full height. The issue is if the mouse enters before it gets to the timeline it animates the background in, it breaks the mouseenter and does not behave as it should. To replicate check the codepen. Mouseenter before the black half background animates in and it will complete the whole mouseenter function. To see the desired result. Refresh the codepen and do not mouseenter until the black half background animates in. Then mouseenter. Is there a way I can a. add the mouseenter mouseleave functions after a certain point in a timeline? b. use a check else if statement to see if mouse has already entered and still has not left play the rest of the mouseenter animation ? Sorry this is my first post so hope this information and the pen makes sense. Thanks for any advice or help in advance, Chris
-
Hi, This is broad question. How can I create something like the pen i mentioned through GSAP. (A detailed explanation would be really helpful as I'm a noob) Thank you in advance.
-
Hi, How do I animate this ball up and down smoothly. I'm using fromTo but i don't know where to put "repeat:-1"
-
Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
-
I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance
