Search the Community

Is this possible? I have a secondary set of buttons that appear for the top level nav buttons, I would like these secondary buttons to transition in, from right to left one after another like a quick cascade when the timeline stops on its containing frame. Using Animate's stacked layer tween process would be too cumbersome for the scalability of these apps, it would be great if a bit of code would trigger a transition-in animation procedurally. Is this something GS can do? Or would there be another JS library more suitable? Thanks.

Hello, I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demo: https://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP! Looking forward to some help from the community. Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are: I have also attached a screen recording of what I've come up with till now

Hi all, I have been experimenting with MorphSVG and I am trying to make a button where the border morphs to a sort of arrow shaped border when you hover over it. This has been fairly successful but I see that the left side of the SVG morphs a bit and the animation still feels a bit too wavy. How can you approach a problem like this? I am not that experienced with MorphSVG and would love some insight.

Hello, Has anybody worked out how to perform Page/Router transitions with Angular and GSAP Thanks a lot

Hi everyone! This is my very first time trying using Gsap, so probably what I am trying to achieve is beyond my league, but since I love it, I really wanted to give it a try! I am trying to make a website with a H1 text animation -which works thanks to the tutorial I followed- but I would love to add now a page transition always with TimelineMax (if possible, of course). Basically, by clicking on an image, this image will bring to another html page. After the click, I'd love a full page transition. Now, I already found on this forum something similar, which I tried to replicate... but it's not working, and being such a newbie with Gsap, I don't know exactly why. Is it because the example I took inspiration from shows a transitions between 2 images in the same page -while I'm targeting a new html? I'm adding a very basic CodePen of the similar code I'm using on the actual page. Thanks to anyone in advanced!

I wish to make some DIV's expand and take up the full screen when clicked on. . I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen. Would the following steps achieve the effect I want 1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default) 2) When clicked - change its position to fixed - animate its top and left properties to 0 - animate its height and width to 100%

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!

Hey, I'm pretty new at this GSAP thing. I've never made a transition between pages so I don't know the best way to do it. In my animation everything works fine the first time, but from then on it doesn't work the same. I know I should reset the animation to its initial state, but I don't even know where to start. Thanks in advance https://codepen.io/JamalDols/project/editor/AOmBar

Hi all- When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white. How can achieve this effect with a different logo that's shaped like a triangle of 3 sections (image below)? Reference website: https://www.cahnwilson.com/ Thank, - Martyn

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.

Hey all, This is my first time posting here, so let me know if i've given too much / too little detail! I'm having an issue with some css on safari, essentially I have a series of elements, positioned along the Z-axis with transform: translateZ, in order to achieve a parallax effect, however, I would also like to apply a mix blend mode to some of the elements on the page. This works fine on Chrome and FireFox, and displays as expected, however it completely breaks the site on Safari with the content appearing extremely zoomed in, i'm not sure what to try to rectify the issue, i've tried attaching prefixes to everything however this doesn't seem to make any difference, I have attached an image bellow of what the page looks like when viewed in Safari. Any help would be really appreciated thanks!

Hi, I found a part of a transition I wonder how to achieve. Please look at the link below. I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container. I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? Any ideas? https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions

Hi All, I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr , i want to make the effect with barbajs and #GSAP . Can Someone help with some code example.

Hi, I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea? In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the animation will not be triggered but this is not happening with the blue one because if you put your mouse over the div and you moved out before the 0.5s, the animation still will be triggered.

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!

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

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 Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/

Hi everyone! Would love to get your opinion on what might be causing performance bottlenecks in a page transition animation I'm working on. Live WIP site is here: http://adamwagner.io/ Click on the first image below the Lorem Ipsum "about me" section. The image is of a band playing. Notice the low frame rate as the image animates to the hero position, a circular splash element hides the page, and then the route changes to the project detail page. Click the "back" text at bottom left below the hero image. This will take you back to the home page with a reverse animation. NOTE: only works in Chrome because I'm using webm for the image I refer to above. Will fix for prod of course. Performance increases after multiple runs, but typically first run performance is very janky. I would love some tips - even if they involve a totally different approach. Thank you so much in advance! I've attempted to use best practices. For instance, I clone the image before animating, making it fixed position to avoid reflow. GSAP delightfully takes care of optimizing position tweens, but I also need to animate height and width. I also need to set autoRound: false, because I need perfect overlap with the real hero image once the transitory clone is removed. Here's the code: import React from 'react' import { injectGlobal, styled } from "styled-components"; import {TweenMax, Bezier, TimelineMax, Power3, Sine} from "gsap"; import store from 'store' // import ripple from '../utils/splash' let globalSpeed = 1; export default class ProjectImage extends React.Component { getDuration(start, end) { let pixelsPerSecond = 700; let duration = Math.abs((end - start) / pixelsPerSecond); // set min value of .2 duration = duration < .25 ? .25 : duration // set max value of .5 duration = duration > .5 ? .5 : duration return duration * globalSpeed; } onImageClick = (e) => { // get the first element - the <body> let body = document.body // get window width minus scrollbar let w = body.clientWidth let h = body.clientHeight // get clicked project element and position data let el_original = this.refs.project_image let {top, left, width, height} = el_original.getBoundingClientRect(); // clone it let el = el_original.cloneNode() // place element on top of original // find a cleaner way to copy these over let elStyles = ` cursor: pointer; width: 100%; height: 40vw; will-change: width, transform; background-image: url(${this.props.image}); background-position: center center; background-size: cover; pointer-events: none; ` el.style.cssText = elStyles + `z-index:200; position: fixed; top:${top}px; left:${left}px; width:${width}px; height:${height}px;` body.append(el) // get mouse click coordinates let {clientY, clientX} = e; // save original image coords for "going back" transition store.set('lastClickedProject', {top, left, width, height}) // create and append splash circle let splash = document.createElement('div') splash.style = ` border-radius:100%; width: 50px; height: 50px; background: ${this.props.pageColor}; position: fixed; top:${clientY}px; left:${clientX}px; z-index:100; opacity: 0.75; will-change: transform; ` body.append(splash) // animate splash TweenMax.to(splash, (0.6 * globalSpeed), {scale:80, opacity:1, transformOrigin: "50% 15%"}, Sine.easeIn); // animate image to the hero position TweenMax.to(el, this.getDuration(0, top), {bezier: {curviness:0.25, values:[ {x:0, y:0, width:width, height: height}, {x:-left, y:-(top/2.5), width: w, height: height+25}, {x:-left, y:-top, width: w, height: height+100}, ]}, ease:Power3.easeOut, autoRound:false}); // redirect to detail page setTimeout(() => { el.remove() splash.remove() window.___navigateTo(this.props.path) }, (this.getDuration(0,top)*1000)) } render() { let style = { cursor:'pointer', width:'100%', height:'40vw', willChange:'width, transform', backgroundImage:`url(${this.props.image})`, backgroundPosition:'center', backgroundSize:'cover', } return ( <div onClick={this.onImageClick} style={style} ref="project_image"> </div> ) } }

Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.

Any idea how one would go about creating a jalousie, Something like what is found here

Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different. I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript. Thanks in advance!

Hi, I figured how to do it, But I Cannot understand the real logic behind it. if I ask a centered div to move X by 250px, then the next animation one by the same distance. they should end up a 500px ... with equal mouvement right ? .. I've made a simple codepen. I need to understand, even things this simple !

I am missing something that I know should be easy for someone well experienced. I have only a couple of months of web design experience. I have a intro timeline and another one trigger on scroll. Both attach to a scrollmagic controller. The intro should finish before the user scroll down. I tried to overflow: hidden on y axis etc... doesn't work. But hidden the scrollbar is not good User experience. IF the intro played completely the first scene is good and reverse fine. But when the user scroll down to the first scene (of 6 scene total) and the intro is not done everything break down when the reverse of intro is triggered. And if windows is refresh on scene1. The intro start. IS there a way to somehow reset the intro timeline if the user reverse back on intro when they scroll down to scene1. And to lock the intro animation when refresh on scene1 or scene2 ...3....Maybe it's a scrollmagic coding but maybe greensock has a specific code to resolve this http://codepen.io/dominium/pen/zKyZZd Thanks in advance