Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,768 profile views

KevinJ's Achievements



  1. KevinJ

    Next.js and GSAP 3

  2. KevinJ

    Next.js and GSAP 3

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

    Next.js and GSAP 3

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

    Next.js and GSAP 3

    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.
  5. KevinJ

    Next.js and GSAP 3

    Would spinning up a codesandbox also work?
  6. KevinJ

    Next.js and GSAP 3

    @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
  7. KevinJ

    Next.js and GSAP 3

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

    Next.js and GSAP 3

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

    Next.js and GSAP 3

    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
  10. KevinJ

    Next.js and GSAP 3

    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
  11. KevinJ


    Is this possible with Greensock? Can the user info be populated via json file?
  12. 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.
  13. 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
  14. KevinJ


    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