creativeocean

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.

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

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

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

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

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

@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? https://codepen.io/creativeocean/pen/YzRzZbJ/c2d6de92e189404436590c055a3c7a4f

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.