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

Exactly. You da man @OSUblake Thanks.

Hi @OSUblake, Thanks. Essentially, on hover, the rect would scale up, after a slight delay the white triangle will scale up (from 0) to the size it is now. Once clicked the bottom two triangles will scale up, the click should also cause the white rect and tri to stay visible . Clicking on it again will reverse the animation. KJ I updated the pen. I got the reverse and on click to work, I think I have redundant code. I would like this happen for the other three options in the bar. I came across this, which seems to partially do what I want.

@atomboy don't mean to hijack your thread but I trying to accomplish something similar. There's a white rect that I would like to scale out from the center to a specific width, have the white triangle scale up (to what is shown now) on hover, then on click have to bottom two triangle scale up to the size they are now. my animation also starts from the left side.

Yes. Thank you. Where do add an ease to the triangles and have them fade in? KJ

So this is where I am so far. http://codepen.io/kjames/pen/LkKmYp I need the elements to be scattered more then gradually move into position. Can I add depth some smaller, larger? Thanks for the help. KJ

Hi Guys, Thanks for the examples. The image linked shows what I'm trying to accomplish. https://s9.postimg.org/ej9kiy31r/anim.jpg KJ

Hey Guys, I've been tasked with creating an html5 ad for a client. The company's logo has a shape element that is made of triangles (a total of 8, all the same size). The concept for ad has the triangles scattered, rotated, resized, then eventually organizing themselves to form the shape element of the logo. Any ideas on how I can create this? I was thinking importing the logo as a svg, further dividing the triangles to get more elements. Is there a way scatter them randomly? I came across this from the example page: https://baconclubhouse.no/en I like the feel the depth of field of the particles. Regards, KJ

Thanks Carl. Exactly what I was trying to do. KJ

Hi All, I'm trying animate elements in an svg to fade in, once all the elements are visible, they will fade out after short delay and the animation will run again. Should I use onComplete? KJ

Thanks Blake. I'm pretty new to JS and will look into combining what I did with what you did. KJ