Search the Community
Showing results for tags 'Animation'.
-
I am new to learn in GSAP , Can any one help me to solve this issue, I want to start my light when my fan start, Both need to be same scroll start and scroll end. Here is my code gsap.registerPlugin(ScrollTrigger); gsap.to("#fan", { scrollTrigger: { trigger: "#fan", toggleClass: 'active', scrub: true, start:"top 85%", //when top of fan passes 75% viewport height end:"bottom 45%", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, perspectiveOrigin: "center 100vh", ease: "none" }); gsap.to(".lamp", { scrollTrigger: { trigger: ".lamp", endTrigger: ".footer", toggleClass: 'lampMove', scrub: 1, markers: true, start:"top top-=850", //when top of fan passes 75% viewport height end:"bottom top", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, });
-
Hello! I am new to GSAP and I am having a bit of troubles with the following task: I am trying to animate some letters "hanging" , I want them to swing from one side to the other but in a quite natural looking way (like moved from the wind? possible?), and when the animation stops to go back to the initial position (center). What I have achieved is looking very bad (sorry, again I am new to this) Can someone maybe help me? Thanks in advance <3
-
I saw this effect a lot of times (But its hard to inspect this effect) - (first section We are building more ...) https://www.kanarys.com/about i dont't no how to create like this type of animation any one help me Please. Thank you in advanced.
-
Hi folks, I've been using scrollmagic for my scroll based animations. And I've just started to learn GSAP ScrollTrigger. With Scrollmagic, I've achieved a scroll animation as seen below. It has 3 sections with repeated elements - a title, paragraph and a image for each section. I've used two separate timelines for scroll in and scroll out actions. I'd love to learn, how this exact same animation is done in with scrollTrigger? Is there a easy way to do this using ScrollTrigger? Thanks GSAP team for ScrollTrigger and the great support to this community.
-
Hello there! I am new to GSAP and I want to animate a navbar to shrink whenever the user scrolls down and grow when the viewport is back at the top. So far, I have been trying ScrollTrigger to achieve this, and it works completely fine until I refresh the webpage on the middle. Since it does not scroll back to the top on refresh, the new viewport will be somewhere down on the page and not the top of the window and so my animation will not work perfectly in every situation. I am attaching some screenshots to show you what I mean exactly... And then after refreshing the page this happens: Is there a way to set the animation start to the top of the window (always)? Currently my code looks like this: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(CSSRulePlugin); gsap.to(".custom-logo-link", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: true, toggleActions: "play none none reverse" }, height: "50px", duration: 0.2 }); gsap.to(".navbar", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: false, toggleActions: "play none none reverse" }, backgroundColor: "white", duration: 0.1, boxShadow:"0px 6px 25px -7px rgba(0,0,0,0.32)" }); Any idea would be appreciated! Solution: The trigger element was a sticky navbar So I set the trigger element to a fixed element like that stripe with the phone number.
-
Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
-
Hello everyone, I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: http://knowlupus.org/ The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this. Your help is much appreciated.
-
Hey! Suuuuper new to GSAP. ? I'm setting up a timeline, and I have ScrollTrigger attached to the scrollbar. There are certain elements on the timeline that I want to slow down their animation 'cause they fly onto the page at the slightest touch of the scroll bar. What property or properties do I need to add or adjust to do this? Here's my code: ** And to add, I've tried changing the duration, delay, and scrub; none of those seem to have had an effect on the time it takes to scroll through an animation. let hcSection = gsap.timeline({ scrollTrigger: { trigger: "#healthcareHome", pin: true, start: "top top", end: "+=1000", scrub: 2, } }); hcSection.from('#healthcareHome .circle svg', { duration: 2, delay: 0.5, x: '+=200px', y: '100%', scale: 0, autoAlpha: 0, rotation:'360', ease: "power4", }).from(".healthcare-home-text", { duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#healthcareHome .web-browser",{ duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#hcBrowserSVG path, #hcBrowserSVG circle, #hcBrowserSVG g, #hcBrowserSVG text", { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.2, stagger: 0.2, transformOrigin:'50% 50%', }).to('#healthcareHome .row', { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.5, stagger: 0.2, transformOrigin:'50% 50%', });
-
I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
-
I'm trying to create an effect, but i don't know where to start. Before hover text in white color, After hover into Text color will be change White to Green with animation like a slide left to right
-
Hi ladies and gents. Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it ? https://theswirlytrain.com Here is a video example of what is happening. // start animation at top of page function scrollTop() { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } window.scrollTo(0,0); } const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop }); tl.set('article', {autoAlpha: 1}); tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3}); tl.from('.home .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1}); tl.from('header', 1, {autoAlpha: 0, delay:-0.5}); tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});
-
- 28 comments
-
- 14
-
-
-
- animation
- scrollscene
- (and 4 more)
-
Hi all, We made an animation for our new website (check codepen) and notice extreme high CPU load when displaying the animation. We tried simplifying the animation but it didn't really work. Any tips or advice on how to lower the cpu usage because we know svg animation is a high on cpu but on slower pc's it sounds like we are going to take off Any help is appreciated! https://cdpn.io/Vonwelzen/pen/ZEbNrLX
-
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
-
Hey Guys! So I just started with GSAP and I trying to create a Mobile Phone Mockup with scrolling Content inside (like e.g.) https://mockup-scroll.webflow.io/ So the part with previous and following element working for me (like sections before the "animation). I currently have a problem to make the Pinned scene and be able to scroll inside and show div's after some "scrolling" time.. My current code is this: <section> <div id="mockup-trigger"></div> <div id="mockup"> content inside </div> </section> // pin scene new ScrollMagic.Scene({duration: 1955, triggerElement: "#mockup-trigger", offset: 0}) .setPin("#mockup") .addTo(controller); I would be very happy about tips!
-
Hi! I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it Based on codepen, I've created my implementation with gsap + scroll magic. Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like. https://codepen.io/Faelivrinx/pen/MWaOaVv I was trying use that code with scroll magic and implementation of horizontal scroll below, but there was a lot of weird artifacts via scrolling. I'd like to give up with scroll magic and use only gsap, but I could't figure out how to properly implement it. I need to track scrolling, where background image (fixed position) have to change opacity depends on visible section. There is any option using gsap to achive it? I'd be grateful for some examples
-
hi guys, i want to achieve https://dexternavy.com like hover effect. i have tried it using this cdn 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js' but it not work as i thought and i am stuck here. Any help would be greatly appreciated.
-
We are looking for GSAP (Greensock) Animator to create an effect like this https://www.shutterstock.com/video/clip-1040785964-3d-rendering-2019-color-year-hexagon-seamless.We'll add the animation to our product login screen. There's a picture of this screen attached, which is also a reference of the color for the hexagons.This codepen effect might be helpful, but it's not exactly what we are looking for, because it doesn't have a wave.https://codepen.io/aslan11/pen/IxLDJThe idea is that the animation will happen when the user clicks on the "Log in" button.We want this to be done with GSAP, but we are open to other technologies such as animated svg as long as it has a good result. The deadline for this project would be up to 3 weeks. Payment: fixed price, open to proposals.
-
Hello Community, I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this? Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here. bottle.svg
-
Hey, I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please? Hover.mp4
-
Hi, I want to make an animation with two lines. Basically the two lines should increase their width and form an "X". My problem is the rotation AND the fact that the animation should NOT start in the center of each line but on the "top-left" and "top-right" of the corresponding lines. When I rotate the lines and then perform the width animation strange things happen. I tried to get things work correct by using the "transform-origin" and "transform: translate()" properties but without success. I've attached an GIF with the X animation I want to achieve. Maybe someone can enlighten me since I'm at the very beginning of my animation career ?
-
Hi! Help me please!)) Now I have loop animation to the right. If I click "Left(reverse)" animation go to the left, but animation stops. What I need do that animation works loop and when i click" Right(play)" and when I click "Left(reverse)"
-
Hi, I have a text Logo SVG containing HTML Paths. when the user scrolls down (> 10 px) the paths of the Logo will be hidden except two paths (.path-d, .path-m). the second path will animate next to the first one. This work and happens correctly. When the User scrolls up to the top of the page the position of the second path should be animated back to the initial position. This doesnt work for any reason. I dont get it. const logo = document.querySelector('.logo'); const logoSvg = document.querySelector('#logo'); const paths = logoSvg.querySelectorAll('path'); const pathM = document.querySelector('.path-m'); const tl = gsap.timeline(); const filterPaths = Array.from(paths).filter(path => !path.classList.contains('path-d') && !path.classList.contains('path-m')); // e.target is the event from scrolling container if (e.target.scrollTop >= 10) { console.log('here'); tl.to(logo, { duration: .2, left: '2%' }) .to(filterPaths, { duration: .1, opacity: 0 }) .to(pathM, { duration: .4, x: '-75' }); } else { console.log('and here'); tl.to(pathM, { duration: .4, x: '0' }); } I tried it now with timeline and simple 'gsap.to(...)' but both with the same result. When the User scrolls to top, the second Path (.path-m) moves a millisecond to the right and goes back to the position where it have to be when the user scrolls down. That doesnt makes sense to me. In HTML the property which ist on the Path is 'matrix(1,0,0,1,-75,0)' which is definitely wrong. What do I forget? What do I wrong? Thanks in Advance.
-
Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.
-
Hi, I'm trying to add animation on hover in my button. The animation work but I'd some issue in the element after the page scroll as you can see in this example https://codepen.io/MG_Dev/pen/VwYawbe How can apply the animation to all page elements? Thank you!
