[zIndex Boost with GSAP Observer?]

Thanks for taking the time, @Rodrigo!

This is very helpful and appreciated. I know about Draggable's built-in boosting, but was unclear about how to achieve this using the GSAP Observer.  This is what I needed:

 

// Increase the z-index value and apply it to the target element
      zIndex++;
      gsap.set(item, { zIndex });

 

Thank you!!

[zIndex Boost with GSAP Observer?]

Hey everyone, 

Is there a simple way to boost z-index of active element with GSAP Observer? 

I thought I could achieve this will class shift and function. 

Any ideas are appreciated. Thank you!

 

See the Pen XWQjWRY by evryali (@evryali) on CodePen

[Adapting Observer to Trigger Click Events]

Thank you, @mvaneijgen! 

I tried to bring the logic into the functions, but neglected to include your "onComplete" functions to halt animation. 

Thanks again! A huge help. 

[Adapting Observer to Trigger Click Events]

Hi everyone, 

I'm trying to adapt GSAP's Observer to trigger both "prev" and "next" click behaviors, but the "up" and "down" events don't match "click" events -- even when I set draggable to "false". Any thoughts? 

 

See the Pen NWmNdKj by evryali (@evryali) on CodePen

[GSAP.UTILS HELP toArray + random]

Thank you @ryan_labar , @mvaneijgen and @PointC!!

 

This probably isn't as elegant as the proposed solutions , but it came down to how to link the array to GSAP's shuffle utility.  Thanks again for the speedy and useful feedback. 

Love this platform!! 

 

Here's my solution: 

 

See the Pen 94e2c7952237f4236535cceabbc1a64a by evryali (@evryali) on CodePen

[GSAP.UTILS HELP toArray + random]

Great. Thank you @mvaneijgen@ryan_labar!!

Calling the function onComplete makes sense! But, is there a way to achieve the random re-set, etc. without the use of keyframes? Is there a reason NOT to use a timeline (If I wanted to add complexity to the animated sequence)?

Thanks for your feedback and help!! 

[GSAP.UTILS HELP toArray + random]

Hi all! 

 

I'm trying to run a timeline using gsap's toArray and random utilities. In the attached demo, I have a simple sequence that I would like to randomize and re-randomize on repeat. 

 

2,5,7,8,9....etc. 

repeat 

3,8,7,1,2...etc.

 

I've reviewed the documentation and haven't been able to figure out how to implement gsap's random or shuffle utility to achieve this. 

As always, I appreciate any and all guidance. 

 

See the Pen b6ec32105578a360dc4c47bc3809e2f5 by evryali (@evryali) on CodePen

[Reverse Timeline on Click]

Thank you! Your prompt response, as always, helped to fix the issue. 

Working pen enclosed. Thanks again! 

 

[Reverse Timeline on Click]

Hi everyone! 

Not sure why the enclosed timeline doesn't reverse on click when I can revers w/ ScrollTrigger and "mouseleave" events?

As always, any feedback is greatly appreciated.  "Closer" / ".closer" class should do it. 

 

 

See the Pen WNKVvgm by evryali (@evryali) on CodePen

[ScrollSmoother Timeline Overwrite]

Ah! Thank you for taking the time. This is perfect and so helpful! Thanks again.

[ScrollSmoother Timeline Overwrite]

Hi Everyone! 

 

I have a timeline that plays and reverses based on scroll direction. I also use a mouse enter/leave function to trigger/control the same timeline. When using ScrollSmoother the direction overrides the mouse enter/leave functions (the timeline won't play until the scroll is at rest, even when I trigger mouse enter/leave events).

My question: Can I overwrite the scroll control to prioritize the "mouse enter/leave" functions? 

 

Thanks, as always. 

 

See the Pen abKQPmO by evryali (@evryali) on CodePen

[Stacking Splits]

This is great, @Cassie! Thank you!

[Stacking Splits]

Thank you @Cassie ! 
I'll work on it! For now, I realize I can reset with an "onRepeat" function, rather than "onComplete".

Thinking way too much over here.

Thanks again! 

M

[Stacking Splits]

Thanks, Jack! 

 

Okay, I have the splits sequenced (I think I was overthinking it), but now I'm trying to reset the heights to "0" after the master completes with an onComplete function. But it's not working. Have a look.

 

See the Pen bGvRwyY by evryali (@evryali) on CodePen

 

Thank you! 

 

 

[Stacking Splits]

Thanks for getting back! 

 

In the example, there are three discrete splitText animations sequenced by a master timeline.

 

timeline 1: 1/3 

timeline 2: 2/3

timeline 3: 3/3

 

2/3 replaces 1/3.

3/3 replaces 2/3.

Then the whole timeline repeats.

 

Rather than fading each animation out, I'd like to stack them:

So, after 1/3 completes, the text block gets pushed up to make room for 2/3 and so on. 

 

Does that make sense??

[Stacking Splits]

Hi everyone!

 

I'm trying to create a simple stacking, type-based animation, where 1/3 stacks on top of 2/3, measuring the respective height for each new section (see rendering) as it stacks.

 

Thanks as always! 

 

 

 

See the Pen 78c37a86792cc5e98099d1ee6b9cf452 by evryali (@evryali) on CodePen

[Cannot load / register ScrollTrigger 3.10.0 or 3.10.1]

@OSUblake Switching the order in my header.php(s) worked for me! Great updates! Thanks for all!

[Adjust Widths on Resize]

Awesome. So helpful. Thank you @Cassie!

I don't have much experience w/ .invalidate(), but seems extremely useful. 

(I know re:circ, 'cerc' reminds me of autechre?!?)

 Thanks again!

 

[Adjust Widths on Resize]

HI everyone,  

 

Likely a common question, but I can't find a clear solution after searching the forums.

I have elements in a div that distribute by flex after a "mouseenter" event. The widths are set to "auto," so they shift once the browser dimensions change. 

I think I need to add a "resize" listener:

 

window.addEventListener("resize", () => {})

and collect the new widths with gsap.getPropoerty() after "resize" and tl.kill()?

But when I try this approach it doesn't work. 

 

Appreciate the help and feedback. 
M

 

See the Pen LYeYWXm by evryali (@evryali) on CodePen

[Help Needed to dynamically calculate container widths]

Hi again @warkentien2

 

I was able to work to a solution with GSAP's  horizontalLoop() helper. 

 

See the Pen PojYwPp by GreenSock (@GreenSock) on CodePen

Thanks again for your help! 

[Help Needed to dynamically calculate container widths]

Thanks @warkentien2 ! 

 

I'm familiar with all the slider libraries. Thanks! 

How about adding an autoplay function to this one? 

You can click the left / right side of viewport to advance the slider.

 

See the Pen poWXbdQ by evryali (@evryali) on CodePen

 

 

[Help Needed to dynamically calculate container widths]

Thanks for taking a look @warkentien2! 

I really appreciate. 

 

The container can remain at 100vw, but I want individual slides to have "auto" widths. Because each slide is set with an "absolute" position, I can't get the flex to distribute the slides without compromises to the slider functionality.

 

Does that make sense?  

 

Here's a non-GSAP example for reference. 

 

See the Pen 0b47c43127aebcc42a7cd6a674a93882 by evryali (@evryali) on CodePen

 

Basically, I want to keep all of the functions in the GSAP slider in the first post, but apply it to a container with images of varying widths. 

[Help Needed to dynamically calculate container widths]

Hi everyone! 

 

Happy to pay someone to assist me with the enclosed pen.

I can offer $50/hr. 

 

My question is how to calculate the width of the slide container with slides of varying widths.

Otherwise, the pen works as needed. 

Thanks for looking!! 

 

See the Pen rNGyPev by evryali (@evryali) on CodePen

 

[Dynamic Caption with Draggable]

Thanks @OSUblake ! 

 

[Dynamic Caption with Draggable]

Thank you @Cassie !!

 

Unfortunately, I had to resort to the Intersection Observer API for the desired effect. Here's the code and updated pen, should anyone want to use it:

 

const captiongrab = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    caption2.innerHTML = captioner.innerHTML;	
  }}, {
  root: null,
  threshold: 0.1
})

captiongrab.observe(box);

 

 

-

 

My next question is how to calculate the width of the slide container with slides of varying widths.

Where can I reach out for paid assistance with this?

 

Thanks for all!