shigimcp

It's responsive! And it was much easier than I thought it would be! ScrollTrigger.matchMedia() is EVERYTHING!!! ISSUES... just because. 1. // ------------------------- CONTROLS: JUMP BUTTONS ------------------------- I cheated... [insert cheeky, cheese-eating grin here] - It *looks* like the anims jump *directly* to the callouts, BUT if you increase the durations of these 2 tweens gsap.to(window, { scrollTo: (document.body.offsetHeight - window.innerHeight) * thisProgress, duration: 0.5 }); gsap.to(window, { scrollTo: thisCalloutPos, duration: 0.25 }); you will be able to see the anims in between (if you jump from one end to the other). i.e. the tween durations above are too fast to allow the middle CALLOUT anims to fully play out. #SneakySneaky NOTE: it doesn't *always* work, but it's good about 95% of the time. ?‍♂️ 2. // ========================= CALLOUTS ========================= I am *CONVINCED* that I can somehow consolidate/simplify the CALLOUTs; that's a lot of code for a pretty basic concept that is repeated save a few parameters... I feel like I'm gonna break this just one more time. LOL! NEW PEN: https://codepen.io/shigimcp/pen/zYBjzQZ

A more practical use of the same code (with some minor changes)... NEW PEN: https://codepen.io/shigimcp/pen/GRqdpmd I could probably add more bells n whistles to this one, but I think it's done. Next step: make this work in React... ? THANKS AGAIN, @akapowl! EDIT: WAIT! MAKE IT RESPONSIVE! Yeah... responsive... ?‍♀️

YOOOOOOOOOOOOO!!! @akapowl!!! You. Are. A GOD!!! [I'm] SQUEALIN' LIKE A 12-YEAR-OLD SCHOOLGIRL!* *As sung to OutKast's "Hey Ya!", "Shake it like a Polaroid picture!" This earworm is my gift to you for all of your amazing help. You are welcome. Anyhoo... THANK YOU for catching all of this! You're making catching up with GSAP 3 a BLAST! I incorporated all of your upgrades, and it's working like a dream! And just because I'm having a really good time learning about ScrollTrigger, I quickly slapped together a speech timeline and added a few frames to the animation just for kicks. NOTE: I'm convinced there's a more efficient way to deal with this using ScrollTrigger.create(); I just have to sit down for a second - yes, I'm dancing again - to look at the variables (triggerStart01 - 04). SQUEEEEEEEE-EEEEE YAAAAAAAA! SQUEE-EEEEE YAAAAA! (There! Earworm! It's yours forever now!) NEW PEN: https://codepen.io/shigimcp/pen/yLJKjdK CHEERS! Shigi

Hi! Added play, pause, etc. buttons. Just need to figure out how to slow down the animation. Feel free to comment / offer pointers... PLEASE! LOL! New [forked] pen (I'm learnin' @akapowl! ?) https://codepen.io/shigimcp/pen/YzWENBP Cheers! Shigi

OOPS! Good point and duly noted, @akapowl! I reverted the original pen back to the original code (I hoard versions like a rabid squirrel), and I forked the solution. SOLUTION: https://codepen.io/shigimcp/pen/YzWQLjv THANKS for the heads-up! Shigi p.s. Gave the dog a treat and took a long walk, so she's good now. LOL!

I applied your corrections to my pen... It's beautiful! *** sniff! cry! sniff! sniff! ***

@akapowl!!! OOOOOMGAAAAAAAHTHANKYOUTHANKYOUTHANKYOU!!! This. Is. BRILLIANT!!! And you explained everything PERFECTLY! (It all seems so obvious now! DERP! LOL!) This is especially helpful since this actually gives me more insight into my next steps, adding other triggered timelines. (I'll probably be back with more questions. LOL!) THANKS AGAIN for all your help! #LearningIsLife Shigi p.s. I probably shouldn't share this, but I can't help myself... I literally got up and did a happy dance. I'm not sure how it came off, but the dog looks worried now.

Thanks, @akapowl! Those threads are actually what got me as far as my first post! They were a great help, THANKS! Sooooo, I managed to get it working... sorta. I updated the [same] pen so you can check it out: https://codepen.io/shigimcp/pen/ZEOLNMP Only one snafu: updating the scroll position from the scrubber/slider and the jump buttons is a bit wonky. scrubber/slider: the controls jump around because it's trying to update the scroll position for each slider increment - you can see this if you uncomment // mainAnim.scrollTrigger.scroll(scrollPos); (line 59) in the JS panel - maybe it'll help to delay the update until a mouseup event on the slider? jump buttons: have to click twice to get the proper update values - having trouble tracking down why this is happening... - seems it has something to do with the same command as above mainAnim.scrollTrigger.scroll(scrollPos); (line 136) in the JS panel (if you comment this OUT, the jump buttons work as expected) QUESTION: Is it possible to set .progress instead of setting .scroll? ANY help is greatly appreciated! CHEERS! Shigi p.s. Thanks for the pen love, Paul! That's one of my pet projects I work on when I need to step away for a minute. Little did I know what a hole I'd find myself in... LOL!

This has probably been asked before, and it's very likely I'm taking the wrong approach, but is it possible to make use of the ScrollTrigger mechanism to make a scrubber for an image sequence? NOTES: - There are additional notes on the pen that can't be seen in the sample here, so please visit CodePen for better understanding... hopefully. THANKS!

Been a *HUGE* fan of GSAP for *YEARS*!!! So much that I built my website with it: https://www.shigimcp.com (The design is a few years old, and this is my development sandbox, so please be forgiving. LOL!) NOTE: the only projects on the "hilites" page that *doesn't* use GSAP are the Ichiban Yofuku and MiMi websites and the 3D stuff which was done with Maya and Unity (as a newbie).