omarel

I'm trying to setup a Scrolltrigger demo in React/NextJs to get some assistance on the forums, but ScrollTrigger doesn't seem to even load on CodeSandbox using CodeSandbox's NextJs template: Per the Greensock docs for CodeSandbox I installed gsap and gsap-trial, but I keep getting this error on CodeSandbox SyntaxError: Unexpected token 'export' Please see here: https://codesandbox.io/s/black-tdd-rncum0?file=/components/bigphoto.js

This is great. My second example above pushing the timeline back into one of the use effects and creating a second use effect hook to deal with the toggle works and looks in line with the guide but I will definitely review this!!

and I discovered this works like above as well - without using useMemo - while keeping the timeline inside there first useEffect and using useRef on the timeline. Leaving for reference: const menu = useRef() const tl = useRef() const toggle = props.toggle useEffect(() => { tl.current = gsap.timeline({ paused: true }); tl.current.to(menu.current, { top: 0, duration:0.7, }, "+=0") },[]) useEffect(() => { toggle ? tl.current.play() : tl.current.reverse() console.log(toggle) }, [toggle]);

I found another example and it seems to be working now with some adjustments. There were 3 adjustments. It works! but is this ok in terms of not triggering multiple timelines on top of each other? Move the timeline out of useEffect use useMemo() - still not fully sure why Creating 2 UseEffects, mount timeline on load and another that mounts play() function with the toggle state changes https://stackblitz.com/edit/nextjs-3ejdzo?file=components%2FExpandedMenu.js import { useEffect, useRef, useState, useMemo } from 'react'; import styles from './ExpandedMenu.module.scss'; import { gsap } from 'gsap'; export default function ExpandedMenu(props) { const menu = useRef(); const toggle = props.toggle; const tl = useMemo(() => gsap.timeline({ paused: true }), []); //timeline with useMemo useEffect(() => { tl.to( menu.current, { top: 0, duration: 0.7, }, '+=0' ); }, []); //useEffect 1 useEffect(() => {\ if (toggle) { tl.play(); } else { tl.reverse(); } console.log(toggle); }, [toggle]); //useEffect 2 return ( <> <section className={`${styles.expandedmenu}`} ref={menu}></section> </> ); }

Hmm, I tried that but it didn't work. I'm not fully clear as my understanding is that the timeline would be reversed according to the CSS values that the elements started with which is in the scss file. top:-100vh But if the issue is not within this code block, but that every time you click it's creating a new timeline, I suppose my first go to is to stop that from happening? If so, I suppose I can rethink the logic if you can offer any suggestions. ExpandedMenu.js //state passes as prop from click on parent component const toggle = props.toggle useEffect(() => { const tl = gsap.timeline({ paused: true, }); tl.to( menu.current, { top: 0, duration: 0.7, }, '+=0' ); toggle === true ? tl.play() : tl.reverse(); console.log(toggle); }, [toggle]); ExpandedMenu.module.scss .expandedmenu { position: fixed; top: -100vh; //css starting style left: 0; width: 100%; height: 100vh; background-color: mixin.$color-darkblue; z-index: 9; }

I'm simply trying to run a timeline on click and reverse on click again. I'm sending the click state as a prop to the expanded menu and then if its true it should run the timeline, if not it should reverse. What am I doing wrong. Why won't the timeline simply reverse with tl.reverse() https://stackblitz.com/edit/nextjs-3ejdzo (update: Working Demo now according to content in the thread below) The reverse is in this file: https://stackblitz.com/edit/nextjs-3ejdzo?file=components%2FExpandedMenu.js I've seen this same question asked few times and Ive reviewed the previous responses to my question but they all have somewhat different implementations. Thank you.

Thank you! Just want to make sure I understand. So .from has an issue with 3.9.1? If so, when will 3.10 come out. I wonder how it worked locally, but not on Vercel. Because you think I had an older gsap version which doesn't have the issue with .from and vercel is initializing 3.9.1? Also wondering how I can check my local npm gsap version. I'm pretty sure it is the latest 3.9.1 as I followed the Module Installation Token installation from the dashboard, but maybe it had something from prior. I just want to be sure and run some tests.

YESSSS!! ScrollTrigger seems consistent in production now! I refreshed a million times on safari and on iPhone. I've tested variations of what was mentioned above but one change resolved it. It was switching From to FromTo. (That was it. I did implement some of the others anyway) Maybe this needs some looking into. Perhaps in production it just doesn't know how to hydrate the starting scroll animation consistently when using From. Locally constant refreshes had no problem, but From breaks on a few refreshes on Vercel and Digital Ocean Apps hosting. I tested some points mentioned in the thread, and will leave some notes for others who may be using NextJS: Change From to FromTo (Used. Worked with no other additions! But did require some minor refactoring ) Destroy ScrollTrigger on unmount (Used!) Move register Gsap Plugins into useEffect (Tried but no impact) Try useLayoutEffect instead of useEffect. (NextJs doesn't allow it) Add ScrollTrigger refresh in useEffect on index page (Quirky as it stopped the scrolltrigger animations on quick reloads) Thank you!! I will keep testing a few other implementations. I'm sure I will run into a few more things, but I think this is pretty safe now!

If you refresh on safari I think it’s more apparent than chrome. Seems to hold in chrome more easily. I really made this sample only to test our common GSAP and ScrollTrigger implementations we want to carry over. This isn’t a live site with much of anything else albeit it looks that way. I’ve tested removing scrolltrigger and the lower sections show up certainly. it’s a demo only for our common GSAP implementations. but I will test those couple of points you guys mentioned above about the body being called and the placement of the gsap registerplugins. As far as I can tell it is currently following whatever is in the react instructions. Im hoping to find some clear consistency on load so we can carry gsap over. React and NextJS are making significant headway these days in front end more than ever before and I’d love to be able to rely on gsap for animations over poking around for other libraries.

Yes. I'm going based on the title of the thread only. We aren't using smooth scrollbar. I made a demo on Vercel and a public repo. This demo uses GSAP on the hero and then GSAP with ScrollTrigger below the fold to fade in sections. When you visit the url and scroll down images simply fade in. Locally ScrollTrigger works no matter how many times I refresh. When deployed in production, if you hit refresh multiple times you will see the components with ScrollTrigger no longer load. It's intermittent. but hitting refresh a few times demos the issue. (The hero animation that doesn't use ScrollTrigger works all the time locally and in production.) Live Demo on Vercel: https://gsapscrolltriggernextjs.vercel.app (must refresh the browse a few times to see ScrollTrigger stop working. Locally no problems) Public Repo: https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/ These are the 2 components below the fold that have ScrollTrigger: https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/components/homepage/Boxsection.js https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/components/homepage/Fullsection.js We're moving our codebase to NextJs and really want to carry over GSAP but we've been testing to make sure we dont run into issues in production.

Having the same exact problem. I thought this was so nuanced I wouldn't find search results. It's being tested in a Next Js app. When deployed to Vercel everything works except ScrollTrigger. I'm not sure where the issues are, but new platforms like Vercel, Next JS, netlify, DO are taking over and most developers are using them now. The issue isn't just on Vercel. I tried deploying on Digital Ocean as well and the same. It loads sometimes, and sometimes not. I refresh to test and it's an intermittent issue. I love GSAP and am a paid user and wanted to really carry it over to our new codebase: React with Next JS framework but at this point we may have to test Framer Motion instead.

Oh man. I cannot wait to try this!!! Now we can just use gsap for everything and no more scroll plugins!!

@Dipscom Just wanted to say thank you! I've played with this and I'm getting it. It is going to be quite tedious when doing a lot of tweens for a production environment where it needs to work properly on every possible device, but I'm happy there's a solution!

That looks interesting. I can only see it on my phone right now. I want to see what happens on desktop and resizing the browser. But I'm wondering if we can release properties and have it retween on resizing and once it hits the desired breakpoint? Overall this can surely get complicated when you have a lot of tweens. But anyone who pushes things into production knows dealing with these issues is of huge importance. I wish greensock had some more built in functionality to deal with responsive issues. Things like swiper js have properties for breakpoints.

@dipscom, what I want to do is on less than 768px the tween should be TweenMax.to('.box', 1, { opacity:1, width:"100%" }) and on higher than 768px the tween should be: TweenMax.to('.box', 1, { opacity:1, width:"65%" } I'm not sure what's the best way to approach this. I'm not exactly sure which option is needed. I dont think its clearProps because I may still want the tween, but with different properties.

Because tweenMax adds inline CSS styles for tweens I'm having trouble with how the tweens look on mobile and different breakpoints. I'm trying to figure out how you can update the tween for mobile breakpoints and when the browser is resized? For example here's a code pen. What if I want this tween width to go to 90% for everything below 768px as well as when the browser is resized below that breakpoint? is there a "easy" way to do this. I'm worried this will get out of hand when you have many tweens on a page

Ah. I think putting the paths in one SVG and being able to animate the viewbox will solve the problem! I'll play with this. Thank you.

@Mikel that looks like a helpful example. I'm going to play with that. But I'm wondering if this will work the same when the ellipse has viewbox properties.

I can put them in the same SVG but then I'm not sure how the placement of an svg with a huge hidden path would lay on the page. I'd have to play with that, especially given viewbox properties. Can tweenMax animate the SVG viewbox?

I'm practicing the morphSVGplugin and may just not be understanding its capabilities. I'm trying to morph a shape into a new shape that is larger and in a different spot in the DOM. (It seems it only morphs a shape into another one, but the properties of the first shape are retained.) Here's my pen, Im trying to morph the 0 into the rectangle, but the 0 is turning into the rectangle in its same spot and is like cut off with no room to be full like the rectangle. I'm not sure how I would morph the 0 into the rectangle but make it large and move into the spot of the rectangle.

I have a codepen with a hamburger menu animation similar to your question, in case it helps you. You can check out the code: You can toggle CSS classes on click and run different timelines.

I want to include the least scripts as possible. Am I understanding correctly? If I include the TweenMax .js file, that automatically includes TimelineMax, all the basic plugins, eases and extra eases?

Sorry I couldn't be of any more help on the topic besides what I noticed on your viewbox. Maybe the team will be able to address whatever I'm missing.

I keep reading this thread and I'm not clear on the issue that's happening. Why not just use .to and tween to the exact CSS properties you want to go to and I don't think in that case you have to worry about reading anything on the current element?

Victor this is such an an amazing feat. I saw it the other day. Great to see you in the forums. You should be proud for sure! As it's a lovely implementation. I was actually wondering about all the animated curves in the photos. Was that gsap? And maybe if you can speak to some of the technology implementated on various parts that would be great.