Search the Community

Hi, I had been using gsap and scroll magic to show and hide image sequence. But the animations are not smooth. They are choppy. Can anyone help me. Here is the link to the page http://geekpowerdev.com/pivotal-2/ Thanks!

Hi I'm new to gsap and I'm still learning how everything works. Right now I'm looking for a way to implement a gsap version of jQuery's slideUp/slideDown functionality. Sliding up is easy: just reduce the height of the div to 0. But sliding down is more tricky: when the div starts in its "slid up" state (so with a height of 0, and not having been opened yet), I don't know what its final height should be. Setting the height to "auto" opens the div, but it does so in one go, not gradually (it is not a numeric value that can be changed one px at a time). What would be the best way to tackle this? Right now I'm thinking about cloning the div, displaying it off-screen (negative margin or position), opening it, getting the height, and then applying that to the original div. Since this feels like a "hack", I thought I'd first ask you if there is a better way. EDIT: in the codepen, just press the "slide" button to see the div slide open and back. Thanks!

Hello This is my first post here as I am very new to GSAP and JS and would like to seek the wisdom of the GSAP Gods. I am trying to have a vertical menu where the active state is a SVG rectangle which slides up or down behind the text based on which ever list item is "active". I would like to use greensock to animate this, as the rectangle will need to bend in the direction of travel with elastic ease. Could I please get some assistance on the best way to build this.

Hi there, I am trying to add a next and previous button to the scroll slider (see codepen), so that when you click on next it move to the next slider page, and also maintain the scroll on the slider. I tried to add the below code but did not work <div class="controls"> <button id="prevButton">Prev</button> <button id="nextButton">Next</button> </div> var prevButton = document.querySelector("#prevButton"); var nextButton = document.querySelector("#nextButton"); prevButton.addEventListener("click", function() oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; }); nextButton.addEventListener("click", function() { oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; });

Hi guys, I am new to gsap and JavaScript and working on the project which has images. What I am trying to achieve is something similar to this website http://public.orsi-and-jan.info/home. I am having problem in appending the div and changing and transforming the image on scroll. Could anyone please guide me how can I achieve the above site man falling animation. Thanks

Hello everyone! I need help with animation performance on RETINA display I have a swiper slider and on slideTranasitionStart I'm animating a mask (covering the whole slider). The animation is very smooth in all browsers. I'm using an external monitor for work but as soon as I drag the browser window to my retina display (MacBook Pro -Retina, 13-inch, Early 2015, macOS Mojave) the animation looks very laggy (lowest fps is around 5-6!) ! I tried 2 main options to do the animation: Adding classes to transform the mask (and only using the most performant css properties transform and opacity on the animated elements). For this option I tried adding will-change property on the animated elements, I replaced translateX with translate3d, I only added transition on the transform property. Using morphSVG plugin to achieve the transforming of the mask (in the codepen demo I'm using this option as it's way less code) Unfortunately both options are still laggy on retina display. Nothing seems to improve the performance on the retina display and I'm running out of options. I'd be very grateful if someone can help out! Thank you

Hello everyone, i'm trying to reproduce this : https://heliasoils.com An animated sine background. I tried to play around with a canvas but i'm kinda stuck : https://codepen.io/Ziratsu/pen/BaaWGex Do someone here have done a similar animation ? Do I need to use the canvas or something else ? Finaly how to link the sine wave with greensock, to create a slider or even better animate it with the scroll ? Best, Enzo

At first sight an easy animation causes lags and is choppy on mobile devices. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy. GIF with visual representation

Hello, how to config magicscroll with tweenmax with requirejs? I work with Magento 2, which is Magento 2 using requirejs. I've tried my code in local, it worked. But in magento with requirejs always fail with error in console. Local (see attachment) On magento 2 my requirejs config like this: var config = { paths: { 'scrollmagic': 'scrollmagic/ScrollMagic.min', 'bootstrapjs': 'bootstrap/js/bootstrap.min', 'tweenmax' : 'scrollmagic/plugins/TweenMax.min', 'timelinemax' : 'scrollmagic/plugins/TimelineMax.min', 'animationgsap' : 'scrollmagic/plugins/animation.gsap.min', 'tweenlite' : 'scrollmagic/plugins/TweenLite.min' }, shim: { 'scrollmagic': { 'deps': ['jquery'] }, 'bootstrapjs' : { 'deps' : ['jquery'] }, 'tweenmax': { 'exports': 'tweenmax' } } }; On page in magento 2 i load like this: requirejs([ 'jquery', 'scrollmagic', 'tweenmax', 'timelinemax', 'animationgsap' ], function($,ScrollMagic){ //code..... }); After that on my console always appear error like this: (see attachment). Is there something wrong with my code? Please help. Thank You.

Hey GS community, I'm a complete novice when it comes down to using GSAP. I am trying to recreate this 'back to top' functionality, which seems to have a pullback effect like a pinball machine before it launches. I believe it's using the same GSAP plugins, but it is compiled in webpack which makes it hard for me to decipher. Here is the link to the example as mentioned. If you scroll down to the footer, there should be a clickable arrow which triggers the back to top action. https://maximilianberndt.com/dreamDiary.html My question is how do I reproduce this with the code I have on Codepen. https://codepen.io/brnlmco/pen/OJJXzOR Thanks!

Hi, i'm trying to make alternative drag gable navigation element , that would scroll the page by dragging it up and down. So i have ran into 2 problems one is the moment you start to drag it jumps to the bounds top/bottom bounds of y axis instantly. Secondly i wan't to animate it, when you scroll the page normally, but that that brakes brakes everything also. Any help/tricks/tips with this would be greatly appreciated.

Hi im kinda new to this and playing around with scrollmagic scenes and have a settup here, that follows a particular screen movement. this works nicely on the mousewheel but what id like to do is add in a next and previous scenes but cant see to figure out the best approach. any help would be much appreciated.

how can i get access to the coords when dragging a div in angular using gsap draggable ?

Hello I am trying to animate each section on scroll and the headline text within section 3 and 5. The headline text I would like to have another duration so it finishes earlier. But it only works if the two scene durations are similar.

Hi all, I started working on an idea and want to stop before I go further and ask a few questions and get some criticism on best practices. I'll preface with saying that I'm only concerned with modern browsers. First, GSAP performance. Is there a better approach I could take to accomplish the same thing and would perform better? Second, React with GSAP. This should probably be a separate question... I've been building react apps via `create-react-app` for a while and in the past, I had some issues using GSAP in React. Mostly, with using plugins that `require TweenLite`, requiring me to eject the `create-react-app` and customize the webpack config to resolve the alias. (As an aside, I now get around ejecting for simple things like this by using react-app-rewired). There are some edge case issues in particular I'm trying to solve. When you move the mouse quickly from left to right, sometime the cube will spin too much. I've played around with some boolean checks to see if I'm overlapping tweens or something but nothing seems to help. I suspect it's based on the way I'm "snapping" the cube's most forward face to the center when the mouse moves back to the center. EDIT 1... is it possible that this is related to React state? I wonder if react-gsap-enhancer would help. EDIT 2... looks like the codepen may even have other issues that aren't present in my local setup. If you move the mouse too far past the cube it stops, which should only occur when the mouse is over the cube. And it's more difficult to see the real issue I'm trying to solve in the codepen.

Hi! I've made a quick codepen showing a problem with animating height/display property smoothly. As you see in the codepen, when you click "Open content" - some content below will "jump" to a new position because the hidden content will take up space when being displayed. Any idea how I can smoothly make this transition from hidden/visible with height so that the content below will not jump like that?

I am trying to create a website using the background effect exactly similar as implemented in this website, http://brightmedia.pl/ . On inspect element the div that creating the parallax effect on background from mouse move and scroll as well, we can see that it is changing the translate3D() property of the element on mouse move. Please guide me how can I achieve this same background effect?

I've installed and imported GSAP and @types/gsap, and my file.ts import it well, but when i run gulp with the Typescript Gulp Configuration i get this error: Error: Cannot find module 'babelify' from 'D:path-to-directory\node_modules\gsap'. I've installed all babel components until i get one last error that tells me "cannot find the function canCompile".

Hi everyone, I was about to implement something like this in my current project, but I guess the GSAP codebase already have it, is it accessible for something else than DOM manipulation? Best.

Hi all I created a prototype some time ago. It has many GSAP animations. I want to focus on the animations that appears when you scroll. For instance the shortcut icons. If you compare my prototype with the production site you'll see that the animations are running slower on the production site. Prototype: http://yousee.grandorf.dk/homepage/homepage-clean.html Production site: https://yousee.dk/ The code is the exact same: import inView from 'in-view'; import { TimelineLite, TweenLite } from 'gsap'; export function heroAnimation() { inView('.hero--animated').once('enter', () => { const items = ['.hero__title', '.hero__lead', '.hero__action', '.hero__legal-text']; const tl = new TimelineLite({delay: .4}); tl.staggerTo(items, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .15) .to('.hero__brand-logo-image', 2, {opacity: 1, ease: window.Power2.easeOut}); }); } export function shortcutAnimation() { inView('.gsap-shortcuts').on('enter', el => { const items = el.querySelectorAll('.ys-shortcut'); const tl = new TimelineLite({delay: .25}); tl.staggerTo(items, .3, {opacity: 1, scale: 1, ease: window.Back.easeOut}, .15); }); } export function mediaboxAnimation() { inView('.media-box--animated').on('enter', el => { TweenLite.to(el, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut}); }); } export function mediacardAnimation() { inView('.gsap-media-card').on('enter', el => { const items = el.querySelectorAll('.media-card--animated'); const tl = new TimelineLite({delay: .5}); tl.staggerTo(items, .5, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .2); }); } What can cause this issue? Any ideas or help will be appreciated a lot. Thanks If you focus on the icons staggering in - you should be able to see the difference:

Hi there, First post here! I'm working on a React/Gatsby app which references this tutorial. I've solved most of the issues except for the following error: TypeError: Cannot read property 'easeOut' of undefined I've tried a bunch of variations of imports destructuring etc but Quad is never defined. My code is as follows: import React, { Component } from "react" import Layout from "../components/layout" import SEO from "../components/seo" import { TweenMax, Quad, Sine, Back } from "gsap/TweenMax" const prettyLetter = require( 'pretty-letters' ) export default class IndexPage extends Component { componentDidMount() { var options = { groupClass: 'char-group-', groupTag: 'span' } prettyLetter('a', options) const lineEq = (y2, y1, x2, x1, currentVal) => { // y = mx + b var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1 return m * currentVal + b } const lerp = (a,b,n) => (1 - n) * a + n * b const distance = (x1,x2,y1,y2) => { var a = x1 - x2 var b = y1 - y2 return Math.hypot(a,b) } const getMousePos = (e) => { let posx = 0 let posy = 0 if (!e) e = window.event if (e.pageX || e.pageY) { posx = e.pageX posy = e.pageY } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop } return { x : posx, y : posy } } let winsize; const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight} calcWinsize() window.addEventListener('resize', calcWinsize) // The feDisplacementMap element const feDisplacementMapEl = document.querySelector('feDisplacementMap') class Menu { constructor() { this.DOM = { svg: document.querySelector('svg.distort'), menu: document.querySelector('nav.menu') } // The images (one per menu link) this.DOM.imgs = Array.from(Object.assign.apply(Object, [this.DOM.svg.querySelectorAll('g > image')])) // The menu links this.DOM.menuLinks = Array.from(Object.assign.apply(Object, [this.DOM.menu.querySelectorAll('.menu__link')])) // Mouse position this.mousePos = {x: winsize.width/2, y: winsize.height/2} // Last mouse positions (one to consider for the image translation movement, another for the scale value of the feDisplacementMap element) this.lastMousePos = { translation: {x: winsize.width/2, y: winsize.height/2}, displacement: {x: 0, y: 0} } // feDisplacementMap scale value this.dmScale = 0 // Current menu link position this.current = -1 this.initEvents() requestAnimationFrame(() => this.render()) } initEvents() { // Update mouse position window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev)) this.DOM.menuLinks.forEach((item, pos) => { const letters = Array.from(Object.assign.apply(Object, [item.querySelectorAll('span')])) const mouseenterFn = () => { // Hide the previous menu image if (this.current !== -1) { TweenMax.set(this.DOM.imgs[this.current], { opacity: 0 }); } // Update current this.current = pos // Now fade in the new image if we are entering the menu or just set the new image's opacity to 1 if switching between menu items if (this.fade) { TweenMax.to(this.DOM.imgs[this.current], 0.5, { ease: Quad.easeOut, opacity: 1 }) this.fade = false } else { TweenMax.set(this.DOM.imgs[this.current], { opacity: 1 }) } // Letters effect TweenMax.staggerTo(letters, 0.2, { ease: Sine.easeInOut, y: this.lastMousePos.translation.y < this.mousePos.y ? 30 : -30, startAt: {opacity: 1, y: 0}, opacity: 0, yoyo: true, yoyoEase: Back.easeOut, repeat: 1, stagger: { grid: [1,letters.length-1], from: 'center', amount: 0.12 } }) } item.addEventListener('mouseenter', mouseenterFn) }) const mousemenuenterFn = () => this.fade = true const mousemenuleaveFn = () => TweenMax.to(this.DOM.imgs[this.current], .2, { ease: Quad.easeOut, opacity: 0 }) this.DOM.menu.addEventListener('mouseenter', mousemenuenterFn) this.DOM.menu.addEventListener('mouseleave', mousemenuleaveFn) } render() { // Translate the image on mousemove this.lastMousePos.translation.x = lerp(this.lastMousePos.translation.x, this.mousePos.x, 0.2) this.lastMousePos.translation.y = lerp(this.lastMousePos.translation.y, this.mousePos.y, 0.2) this.DOM.svg.style.transform = `translateX(${(this.lastMousePos.translation.x-winsize.width/2)}px) translateY(${this.lastMousePos.translation.y-winsize.height/2}px)` // Scale goes from 0 to 50 for mouseDistance values between 0 to 140 this.lastMousePos.displacement.x = lerp(this.lastMousePos.displacement.x, this.mousePos.x, 0.1) this.lastMousePos.displacement.y = lerp(this.lastMousePos.displacement.y, this.mousePos.y, 0.1) const mouseDistance = distance(this.lastMousePos.displacement.x, this.mousePos.x, this.lastMousePos.displacement.y, this.mousePos.y) this.dmScale = Math.min(lineEq(50, 0, 140, 0, mouseDistance), 50) feDisplacementMapEl.scale.baseVal = this.dmScale requestAnimationFrame(() => this.render()) } } new Menu() } render() { return ( <Layout> <SEO title="Home" keywords={[`Artist`, `Brisbane-based`, `drawing`, `painting`, `watercolour`, `sculpture`, `installation`, `video`, `embroidery`]} /> <div style={{ paddingBottom: 100 }}> <svg className="distort" width="350" height="450" viewBox="0 0 350 450"> <filter id="distortionFilter"> <feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/> </filter> <g filter="url(#distortionFilter)"> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/1.jpg')} height="350" width="250"/> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/2.jpg')} height="350" width="250"/> </g> </svg> <nav className="menu"> <a href="#" className="menu__link">Shanghai</a> <a href="#" className="menu__link">Taipei</a> <a href="#" className="menu__link">Bangkok</a> <a href="#" className="menu__link">Kyoto</a> </nav> </div> </Layout> ) } }