KevinJ

https://codesandbox.io/s/next-gsap-pquuy

Yes

Can you tell me if works? I recreated the page on codesandbox https://pquuy.sse.codesandbox.io/collective

Doh! I'll look at as soon as I get back to the my laptop. KJ

Hi @OSUblake and @ZachSaucier Hope you had a good break. Here is the link to the repo. https://github.com/KevJames/collectiveand.co I did manage to gsap to work but we don't think it is the right way. KJ I'll probably recreate the animation in the hero section, using gsap.

Would spinning up a codesandbox also work?

@OSUblake I spent the morning tinkering and broke all kinds of stuff. const withSass = require("@zeit/next-sass"); const withCSS = require("@zeit/next-css"); const withTM = require('next-transpile-modules'); module.exports = withTM({ transpileModules: ['gsap'] }); module.exports = withCSS( withSass({ webpack(config, options) { config.module.rules.push({ test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, use: { loader: "url-loader", options: { limit: 100000 } } }); return config; } }) ); Everything is back to what it was. Added this and removed the addition to the package.json file but still getting the previous error. I'll look at getting a repo setup. KJ

BTW, I did add: "build": { "transpile": [ "gsap" ] } to my pakage.json file as you suggested.

@OSUblake that's what I had initially but I got this error (I changed it back to that and the error is back):

Thanks for the response @ZachSaucier and @OSUblake. Here is what I'm getting: Here is what I did: Installed gsap via npm Installed next-transpile-modules Created a animation.js file that has this code: import { gsap } from "gsap"; gsap.from (".studio" > "h2.section-title", {y:500, opacity:0, duration:1}); In the file I'm trying to animate elements, I imported the above animation.js file: import '../scripts/animations.js'; The page loads without error but in terminal I get this: GSAP target false not found. https://greensock.com Invalid y tween of 500 Missing plugin? gsap.registerPlugin() Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin() KJ

Hi All, I'm about to pull the trigger on joining Club Greensock. While I understand support isn't offered for non-greensock products, I've struggled with figuring out how to get gsap to work in my next.js project I'm working on. With that said, can someone point me in the direction of getting gsap working for with Next.js please. KJ

Is this possible with Greensock? Can the user info be populated via json file?

Hi Craig, Thanks for responding. Sorry for not being clear. I want to remove the close button completely and have the message show for 5 secs the it reverses playback.

Hi All, I'm sure this has been asked before but I can't find a similar solution. In the pen above I'm triggering an animation on a button click. Rather than having the close button reverse the animation, I'd like it to pause for a set time and then animate out. I was playing with it yesterday but getting some weird results. KJ

Hi All, I'm trying to create a gauge (of sorts). It has 3 sections, each having three markers. The current (red) marker, a low (left grey) and high marker (right grey). Each marker will relate to a number in a range (I would like to connect to DB later on). When a group is clicked, all the markers will animate to a changed position (based on a different number). How difficult easy is this to do with gsap? KJ