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!
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
Hi again @warkentien2
I was able to work to a solution with GSAP's horizontalLoop() helper.
https://codepen.io/GreenSock/pen/PojYwPp
Thanks again for your help!
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.
https://codepen.io/evryali/pen/poWXbdQ
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.
https://codepen.io/evryali/pen/0b47c43127aebcc42a7cd6a674a93882
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.
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!!
https://codepen.io/evryali/pen/rNGyPev
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);
https://codepen.io/evryali/pen/rNGyPev
-
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!
Thanks for getting back @Cassie!
I want ".caption2" to pull html from each slide's ".caption3," so it updates as you drag. Kind of like an "active" or "is-selected" function.
So, for slide 1, ".caption2" = 1. Caption1, for slide 2, ".caption2" = 2. Caption2, etc. as you drag or advance with the "prev / next" buttons.
I added the onDragEnd call, but it still doesn't work.
Hi everyone!
I'm trying to fire a function:
function activeCaption(){
caption2.innerHTML = captioner.innerHTML;
}
when the enclosed slider's updateProgress() and updateDraggable() fire, but the caption isn't updating.
Any help is appreciated, as always.
Thanks for taking a look!
Building from this idea, I wrote a horizontal loop with a ScrollTrigger pin.
The loop on scroll down feels seamless but scroll up feels "stuck" because of the repeated section (1).
Any thoughts?
https://codepen.io/evryali/pen/PoJwvGZ