creativeocean

Wow I'm late -just seeing this thread now I 100% agree, one shouldn't rely on IDs to become global vars in any actual project. That said, it's a cheap shortcut for making concise demos. If you really wanted that behavior (I've worked for a few agencies that do this), you could loop over all the elements with an ID and make them global vars, like so: [].forEach.call(document.querySelectorAll('*'), function(el){ if (el.id) window[el.id] = el; }); // IDs to vars However, for future readers/editors of the code, it's kind of nice to see clearer variable definitions...sort of an intro to the cast of characters.

@OSUblake thanks for the input/suggestion about <use>. If the performance doesn't totally suffer, I like that approach better than making so many duplications and extra timelines. Cheers!

I'm building a little driving game and ran into trouble using motionPath's align property. The plan is to have a split-screen view; duplicating much of the SVG. This works well enough, except when I use align the second set of cars align to the first track. Do I just need to make 4 motionPath timelines to work around this? (to play click on the pen, and use your left/up/right arrows)

Gulp is great for building banners! I primarily use it for LiveReload, and sometimes for bundling lots of different ad versions. But I've worked at several agencies that use it for running all sorts of other tasks (sprite-sheeting, css preprocessing, image compression, building/compiling, testing). I've also seen some places use grunt and webpack for those tasks. Personally, I like to use minimal CSS in banners. GSAP does an excellent job smoothing over browser inconsistencies, so there's no real need to use SCSS. And if you're animating a CSS property, you might as well set the start/end values in JS. For sprite-sheets, gulp is a good option. However, I usually use this handy tool because the settings let you adjust padding + layout (important for image sequence vs just compiling separate images): https://draeton.github.io/stitches/ And for image compression, if you're squeezing every last drop of optimization out of your assets, then you have to dial that in for each image. This is my favorite tool for that: https://compress-or-die.com/ Hope those are useful insights/links for anyone building ads!

Wow! Jack, I didn't expect this much support and improvement. There's a lot to review/digest/learn here, but I'm very grateful for the help and guidance. Codepen is now back online and I've forked the previous pen (and made it public), now using your JS: https://codepen.io/creativeocean/pen/OJgNyVm?editors=0010 Turned out pretty slick, if I do say so myself! Go team!

I hope it's okay to ask for help here, even though my problem has nothing to do with an actual GSAP issue. I'm working on this horizontal slider, and right now the parallax image movement (line 89) is just based on the draggable element's total progress. That works fine when the carousel has just a few images, but when there are many images, the amount of movement that is visible as each box crosses the stage becomes too small. And lots of the image is never actually seen. At first I thought this would be pretty simple, but I've been fruitlessly struggling to figure out an equation/setup that will make any number of slides have the same amount of parallax motion, and still be responsive to the full browser width.

@Cassie thanks for confirming my suspicion about tweening progress with different ease applied. @OSUblake that's a great point. Tweening the progress, is definitely the right way to get what I was originally after. But the fact that changing defaults (not just ease) would potentially have a jarring, jumping effect, answers why it wouldn't be a useful feature to have. Thanks! @elegantseagulls yoyoEase is an important prop to know about, even if it's not exactly applicable here. Until you mentioned it, I didn't know that yoyoEase:true flips the ease. I've always used it to define a completely different ease on reverse.

Often I use a single timeline for button animation, and play/reverse on enter/leave. I know it's possible to adjust the timeScale for play() and reverse(), but I'm wondering if there's a way to change the timeline's default easing. It'd be great to have an easeOut when playing forward, and an easeInOut when reversing. I guess one way to get this effect could be to tween the TL's progress with whatever ease is desired. But I'm curious to know, generally, if timeline defaults can be updated after the fact, similar to the timeScale method.

@OSUblake holy cow that was a fast reply/solution! Thanks a million

Hello! I've been working on this pen that uses Draggable to move and hitTest SVG elements, and ran into an issue where liveSnap works as expected but snap does not. Anyone know why snap wouldn't work in this case? Also, if you like quick 2-player games, go get the physical version of The Genius Square!

Woah! That's awesome, Jack! I love the new "labelsDirectional" behavior. Definitely a better experience...feels really polished. Thanks so much for the incredibly fast action on this. Hopefully this'll be a restful weekend for you 🤞

@GreenSock thanks for the swift reply and compliment And no need to rush anything on my behalf! This isn't a pressing issue, more just something I noticed and a few questions that popped up while I was working.

I've built a thing that uses a ScrollTrigger to scrub a timeline, which transitions in/out fixed-position page sections. It's working fairly well, however, there's something happening in the snapping's velocity calculation that is causing issues when you click a progress marker button and scrollTo a specific point in the page. If you set the duration on line 315 of the JS to something like 1, it works fine...because that was enough time for the velocity calculation to simmer down. I thought maybe toggling the disable/enable would be the fix, but it seems the velocity is calculated regardless of if the specific ST is enable. Two questions: 1) is there a way to use 'label' snapping without velocity calculations, and just move to the nearest label at the end of the delay, and 2) is it possible to change the snap property after an ST has been created?

And now I've gone even further down the 3D cube rabbit hole –made a Draggable version: https://codepen.io/creativeocean/pen/poRyMLX?editors=0010

I know this thread is now over a month old, but I wanted to share a fork of Zach's pen. I made a 6-sided die from the cube. To simplify/clarify, the 3d rotations are moved out of the CSS. Hopefully this demo is useful to someone... https://codepen.io/creativeocean/pen/qBRbNwa