[GSAP expert available for freelance]

Ah shucks @GreenSock. Thanks for the kind words!

I'm not an expert at developing sites that use right-to-left text. But I am a hopeless fanatic when it comes to GSAP. I use it everyday. Thank you to everyone here who makes such an awesome product and supportive community.

[GSAP expert available for freelance]

11 hours ago, halmalki said:

Hi Tom, Are you an expert in RTL sites?

Good morning @halmalki. I wouldn't call myself an expert. I've worked on exactly one site that offered both left-to-right and right-to-left language versions. Sounds like @Jack04 has reached out. Hope it's a good fit for you both  

[ScrollTriger kill() would jump down]

Jack's code is exactly what I was looking for today.

 

One small additional thing that may help someone in a similar spot, I had other scrollTriggers further down the page that were impacted when the pin-spacer was removed. I added ScrollTrigger.refresh() at the end of the onLeave function to make it all work as expected.

 

The more I use scrollTrigger the more I appreciate the immense amount of thought and effort that went into its development. Huge thanks Jack and everyone at GSAP

[A final clarification about invalidate() and responsive timelines]

Makes sense and great to know, Jack! I appreciate all of the insights and help on this. Learned multiple new things here

[A final clarification about invalidate() and responsive timelines]

@Rodrigo you rule. Your solution is clearer and works like a charm! 

@Carl your pen is very relevant, and your code looks quite similar to Rodrigo's solve. And now I know about scrollWidth -that's way easier than all the nonsense extra math I was doing!

 

Thank you both for the expert guidance!!

 

[A final clarification about invalidate() and responsive timelines]

Hey Carl. Thanks for the reply. ScrollTrigger's invalidateOnRefresh has the same effect as if you call invalidate() on the timeline (though it doesn't work if you do both). Since I needed to put the updated x calculation in the onRefresh function, I thought it read easier this way.

 

PS, I swear I didn't mean to @ you for such a fast reply!  Thanks so much for your time + thoughts on this!! 

 

[A final clarification about invalidate() and responsive timelines]

@Carl your video explaining invalidate() was SUPER helpful! Thanks a bunch for walking it through so clearly.

I'm currently working on a ScrollTrigger animation that requires recalculating x position on resize and found invalidate() works as expected while the timeline's progress is 0. However, things break when scroll position puts the timeline's progress past 0. Below is a pen to demonstrate. Try resizing the width while above the scrollTrigger's start, and then try resizing somewhere after the start position. Any suggestions on how to handle this?

 

See the Pen c2d6de92e189404436590c055a3c7a4f by creativeocean (@creativeocean) on CodePen

[The object in Draggable does not listen to the mousedown event, but the click and touch events are fine]

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.

[Split-screen causing issues with motionPath 'align']

@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!

[Split-screen causing issues with motionPath 'align']

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)

See the Pen 576b5c1f140ea115cd6e5a87a904e4ee?editors=1010 by creativeocean (@creativeocean) on CodePen

[Gulp (or other task runners) implementations that make your development life easier.]

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!

[Parallax math help]

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: 

See the Pen OJgNyVm?editors=0010 by creativeocean (@creativeocean) on CodePen

 

Turned out pretty slick, if I do say so myself! Go team!

[Parallax math help]

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.

See the Pen 44639788dd72f4e26b8c8b52cb096480?editors=0110 by creativeocean (@creativeocean) on CodePen

[Updating Timeline Defaults]

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

 

[Updating Timeline Defaults]

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.

See the Pen YzVmNJy by creativeocean (@creativeocean) on CodePen

[Draggable snap vs liveSnap]

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

[Draggable snap vs liveSnap]

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!

See the Pen xxdYXNZ?editors=1010 by creativeocean (@creativeocean) on CodePen

[Using ScrollTrigger w/ fixed position sections]

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 🤞

[Using ScrollTrigger w/ fixed position sections]

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

[Using ScrollTrigger w/ fixed position sections]

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? 

See the Pen b0028a71d7263ff1122245389cb7d721?editors=1010 by creativeocean (@creativeocean) on CodePen

[Rotate 3D Cube]

And now I've gone even further down the 3D cube rabbit hole –made a Draggable version:

See the Pen poRyMLX?editors=0010 by creativeocean (@creativeocean) on CodePen

[Rotate 3D Cube]

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

 

See the Pen qBRbNwa by creativeocean (@creativeocean) on CodePen

 

[Agency looking for freelancer to create parallaxing animations]

I'm also interested in helping on this. Just sent you a message w/ my contact info. 

 

Thanks!

 

Tom

[Kudos to @creativeocean (Tom Miller)]

Yea, I closed my Twitter acct earlier this year (my handle was @FlashGuyTom which tells you how out of date and disused it was). I'm plenty active on CodePen, though! Thanks again for the referrals, and I hope the svg image sequence stuff works out well!

[Kudos to @creativeocean (Tom Miller)]

Thanks so much for the shout-out @PointC