John Polacek

Thanks everyone - glad you're finding it useful! Haven't had much time to keep the project up to date as I started a new job but the approach should continue to work.

Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.

It is strange because I can deploy to Vercel with: import { gsap } from "gsap" No problem, no need for /dist. I deploy and everything builds and animates, but for SplitText is needs /dist. Curious why that is? For deployment, you're right it is something with the member plugins. I'm doing the private npm route so it is probably getting tripped up with step 4 where you have to do `gsap@npm:@gsap/<package>` the first time. During a Vercel deployment, it just does `npm install` by default. Aha! That's it, just need to go into Vercel and set up a custom install command. npm install && npm install gsap@npm:@gsap/<package Probably worth updating your GSAP Installation docs in the NPM section there. Likely need a similar step for Netlify.

I'm running React/Next.js on my local machine. When I do this: import { SplitText } from "gsap/SplitText" Then do npm run dev Then I get this error: error - .../node_modules/gsap/SplitText.js:12 import { emojiExp, getText } from "./utils/strings.js"; ^ SyntaxError: Unexpected token { If I change my import to the following using the ol’ dist folder trick, we're all good. import { SplitText } from "gsap/dist/SplitText" gsap.registerPlugin(SplitText) I can live with that, until when I deploy to Vercel, I get a build fail with this error: ModuleNotFoundError: Module not found: Error: Can't resolve 'gsap/dist/SplitText' Am I missing something?

Hey Greensock fans - Just wanted to share a new open source thing I made that I think you might like. It is a little project that makes it easy to add Greensock animation to web presentations. It is especially cool if you are a Club Greensock member so you can take advantage of SplitText, MorphSVG, etc. Fancy intro: http://johnpolacek.com/introducing-tweendeck/ Demo/docs: https://johnpolacek.github.io/tweendeck/ Github repo: https://github.com/johnpolacek/tweendeck/ I created TweenDeck so I could build an animated slide deck for a talk I gave yesterday which you can find at http://johnpolacek.com/rethinking/

Nevermind. Dumb error on my end.

Working on a fun new project with some interesting timeline scenarios. As part of that, I'm composing some arrays of tweens then adding them to a timeline. The results didn't go as I expected. I made an isolated Codepen to demo (see link below). In that link, I am expecting Test 1,2,3 to animate the same as Test 4,5,6. What am I missing? http://codepen.io/johnpolacek/pen/PmwQKr

Some issues with the code: You embed jQuery twice It is recommended to put the JS at the bottom of the page before </body> You have 2 document ready events. The 3rd parameter in your TweenLite.from statement is missing a closing bracket: you did:{css:{position:'fixed'} should be: {css:{position:'fixed'}} [*]The TweenLite.from statement isn't properly closed with a parenthesis you did: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'} should be: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}}) [*]initScrollAnimations() is never invoked. And in the example provided, isn't necessary. If you want to improve your JS chops, I recommend taking the free JS courses at http://www.codecademy.com/tracks/javascript Also, I recommend using Dev Tools and a JavaScript validator (like http://www.jslint.com) to catch these types of errors. $(document).ready(function() { $('body').css('visibility','visible'); $('#wrapper').css('display','block'); var controller = $.superscrollorama(); controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}}), 0, 200); });

Tweening is just transitioning between one css state and another. If you set the css to the first transform state without any tweening, you can see that it is positioned in the top left. Let's fix that. First set the parent element text-align propert to center to horizontally align the image inside. #orb1 {text-align:center;} Next tween the margin-top property of the element to keep it in the center. controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), 6, {css:{marginTop:'50px', opacity:0, width:20, height:20}, immediateRender:true, ease:Quad.easeInOut}, {css:{marginTop:'0', opacity:1, width:290, height:290}, ease:Quad.easeInOut})); And that should do it

You can add an offset after the tween to adjust when the scrolling begins: controller.addTween('#fly-it', TweenLite.from( $('#fly-it'), 3.25, {css:{left:'2000px'}, ease:Quad.easeInOut}), 0,200); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{opacity:0, rotation: 360}, ease:Quad.easeInOut}), 0, -200) The '0' parameter is the duration of the tween (0 means it autoplays through) and '200'/'-200' are offsets to the default scroll position in which the animation starts. Also, note that I'm using TweenMax. This is because animations with a duration use the tween progress property, which is only available on TweenMax tweens.

Pinning elements takes them out of the normal page flow. The best way would probably be to assign the scroll position numerically.