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.

@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

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

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!

Thanks so much for the shout-out @PointC