ScrollTrigger - Animations within sliding panels

[StudioProjects]

Hi Folks

 

I've (sort of) recovered from a nasty dental issue and I've been experimenting (in between bouts of pain) with some sliding panels. Please refer to the attached Code Pen, now that I've worked out its idiosyncrasies. My questions are as follows:

 

• Panel 1 - I've managed to get the text animated inside the panel, I've tried a few different CSS tricks to get the "BIG TEXT" sitting behind the other text as a watermark. Obviously I've tried z-index (and wrapping the three text elements in other divs inside the panel), but it appears to affect the entire text due to what I'm assuming is GSAP determining the z-index of the panels dynamically?
• Panel 2 - I'm trying to animate the two boxes without much success, I was under the impression that I could determine the trigger points using "left" and "right" properties, but this doesn't appear to work.
• Snapping - the panels are currently snapping at 50% of either the page width or height.

 

This is probably a fairly complex way to start off with GSAP and ScrollTrigger, especially given that I haven't worked as a Front End Dev in 11 years (I was a Flash AS2 dev, anyway) and I'm still blowing the cobwebs out of my CSS skills - it's changed somewhat over the last decade (obviously for the better). I've generated the panels dynamically successfully, but as you can see the rest of my code is pretty clunky, to say the least.

 

Any pointers as to how to make my code cleaner and to get things animating around the panels would be greatly appreciated. I've spent a full day on this and spent the last few hours of it running around in circles. I'm fairly happy with my progress, but I think I need to use another couple of loops to get it working properly.

 

Thanks so much!

 

Andy 🙂

 

 

See the Pen YzaNbLO by StudioProjects (@StudioProjects) on CodePen

[Cassie]

Hey there! Sorry to hear about your tooth.

 

You're right that this is jumping in at the deep end. I'll do my best to help out though!

First up - left and right only apply to horizontal scrolling. Which you're not doing.

The best bit of advice with ScrollTrigger is that you're just using the scrollbar to scrub through the progress of a timeline.

A really simple way to get results is to just create the timeline you want and then hook it up to scroll. Obviously this doesn't work for everything but it's a good first step - then once you hit up against the limitations of this approach you can start investigating other routes.

I've refactored into a big timeline and commented out the first panel and the ScrollTrigger for you so you can see what I mean.

See the Pen BarWozN?editors=1010 by GreenSock (@GreenSock) on CodePen

Another little tip, work on timings and positioning using the position parameter.  That'll give you a ton of control over your animations.

Snapping-wise - if you're using a big timeline you can mark out the points you want to 'snap' to with labels and then snap to those labels. Nice and easy!

Hope these tips help

[SteveS]

I also tried a refactor of this. I'm not super happy with the results though. However, I think the way I structure the code might be instructive:

See the Pen dymvozd by SteveSDaBest (@SteveSDaBest) on CodePen

 

Users might experience some jitter while scrolling because of how I implemented the right and left slide in. That can only be resolved using scrollSmoother. Actually the use of normalizeScroll: true on the scrollTriggers takes care of this. No need for the extra plugin. My method doesn't require absolute positioning of elements which helps fix some of the z-index issues you were having.

[StudioProjects]

Wow Guys!

 

How good are the both of you! Thanks so much for your incredibly informative answers.

 

Cassie (a video of yours on YouTube was what piqued my interest in GSAP after 11 long years without Flash), I will have a look at the resources that you have provided - I had a feeling that labelling may help! I will spend the morning looking at these and at your solution.

 

Steve, your solution makes a lot of sense programmatically and I understand everything that you've done, which gives me hope - perhaps the few months that I spent delving into building games this year may hold me in good stead after all!

 

I'm sure that a dull day spent looking at the wealth of material that the both of you have provided will allow me to build something for my little studio - www.studioprojects.com.au - my first test case. I had to liquidate my primary business www.coastalaudio.com.au due to a bad back, so starting from scratch at the tender age of 57 is not easy! I've been relegated to building WordPress sites for small businesses as secondary income for over a decade - yuk!

 

After about a year of taking a deep dive into vanilla JavaScript and the Canvas, here's the current landing/holding page to my new website www.frontenddevelopment.com.au (and, believe it or not, registered business name!) - it's a fun exercise in combining Canvas with DOM elements. I specialised in Agency microsites back in the day (1492), thus my mention of GSAP and Three.js - I'm about a third of the way through the amazing Bruno Simon's Three.js course. I've also invested in Carl's Creative Coding Club courses to get my head around GSAP. It's all a bit overwhelming, but great fun!

 

I used the Tweener prototype extensively when I was building Flash websites and I was delighted when I discovered that it was the birthplace of GSAP! I've managed to run the SWF's in the Flash player outside of the browser to circumvent the security block and at least get a portion of my old portfolio on video - https://www.youtube.com/playlist?list=PLjRhbej2e9NipUB0ufn7WTZrdgllnucPH - all the designs (apart from the Samsung sites) are mine - I'm not the greatest designer, but have a reasonable grasp of UI/UX (I hope) and HCI.

 

My profuse apologies for all of the links (and my abridged life story), but I wanted to give context as to why I've quite literally thrown myself into the deep end! Thank you both for making feel like a member of a wonderful community, I'm looking forward to the remainder of my career, and as much as I miss my warehouse full of beautiful equipment, my back doesn't!

 

Again, thank you both so much!

 

Andy