ynamite

Hi there I'm using the horizontalLoop helper function to create a simple marquee effect where 2 divs continuously scroll from right to left. Think of a news ticker like effect, where each element takes up 100% of the available horizontal space. Now I'd like to add two things: pause the effect when hovering over an item with the mouse -> this is working, I just added a mouseenter and mouseleave event listener to each element, pausing and playing the timeline on enter/leave respectively. Secondly I'd like to scroll to the hovered element's index on mouseenter (after a short delay), so that the full element becomes visible on mouseenter. I tried using the toIndex function and while that does pretty much exactly what I'm looking for, the effect looks strange when the first item comes into view for the second time (from the right). Instead of scrolling the rest of the way to the left (i.e. the shortest way), horizontalLoop scrolls all the way back to the beginning, passing the second item, to go back to the first. Which does make total sense based on the code of the toIndex function, but looks odd, as it's cleary the longer way it needs to scroll and not what I'd like to happen. To see what I mean, mouse over ticker entry 1 once it comes into view on the right, as ticker entry 2 is moving out of view to the left. Is this possible? I've no idea how to approach this, as I don't understand how horizontalLoop does it's magic ... any ideas? Thanks a lot, would appreciate some help/pointers

Perfect! Thank you

Thanks a lot @Rodrigo that indeed fixes the problem. My code still feels overly verbose though. Any other tips to share? Suggestions are welcome. Here's an updated codepen for anyone interested: https://codepen.io/ynamite/pen/eYPwNwY

Hi I've been struggling with the issue of conflicting timelines/tweens over and over again. Notice how in the example, the "more info" divs are consistently not appearing after resizing the browser window while the animation is playing (you'll have to open the example in a new tab to see the problem). https://codepen.io/ynamite/pen/jOeovBm I can't seem to revert a timeline/tween to it's initial state and reinitializing the timeline/animation after resizing the browser window. I've tried killing and/or clearing a timeline, I've tried spamming `overwrite: true` everywhere, I've tried debouncing the resize event etc. I'm at a wits end ... I've checked the forum but could only find the solutions I've already tried. Neither overwriting nor killing/clearing tweens/timelines seems to do the job, at least not in all cases. Sometimes it works and in other cases it just doesn't. It feels inconsistent and my code is starting to feel quite hacky. I'm probably missing a thing or doing something wrong. The example shown on the following page seems to exhibit the same behaviour I'm experiencing: Once you click on "move back" and then click on "restart" the animation seems to break. At least in the way that I understand it. By clicking "restart" I'd expect the element to move back to the right edge and roll back to the left (like it doesk on page load). Instead it just hangs and rolls on the left. Thanks!

@GreenSock Excellent, exactly what I was looking for. Thanks a lot!

@Shaun Gorneau No real reason, just a gut feeling. Nothing against progressive enhancement, do that all the time, I've just never had to change the actual node type of an existing element before. Probably just me. Thanks for the help!

Alright, easier done than said seems to be working fine. Still seems a little off to me but oh well, it works. Thanks!

Hm, that sounds edgy. Can the tag of an existing element simply be changed? And if so, how? Edit: the whole element would need to be replaced, I think.

Thanks @OSUblake After changing the <a> to a <div> it works fine and was much easier to implement than expected. The drawback is that the link will only work with JS enabled. Not sure if search engines will be able to pickup on these faux-links.

Hi there draggable is working fine on my touch device, but not on my desktop using a mouse – latest Firefox Mac, haven't tested any other browsers. Anyone have any ideas as to why? In this specific case the element I'd like to be draggable is placed within an anchor-tag and I suspect that's where the problem lies. Adding `dragClickables: true` doesn't seem to make a difference. I could change the HTML, but I'd like to avoid that if possible, as this would require some amount of work and testing on project that is live. Thanks for the help!

@ZachSaucier @mikel Check it out essential functionality's mostly done: https://dev.diener.coach Let me know what you think! Thanks again for all the help! PS. Will add a password later, send me a pm if you need it.

This is what I have so far: https://codepen.io/ynamite/pen/wvzOgNd Performance is much better with separated paths (who would've thought). I wish I had a bit more control over what happens when though, feels a little arbitrary atm – been trying to use the individual durations to gain more control but getting inconsistent results, especially the further along the animation goes. Also I would've liked if initially all paths would be invisible (not yet drawn) and that the first path is drawn/animated. Only after this first path is drawn, does the rest follow by adhering to scrolltrigger. I tried doing it but it didn't work. Any ideas? Hope you know what I mean. @mikel actually it was useful once I knew what it was meant for haha. Thanks man! Thanks a lot!

@mikel I don't get it and feel left out ? How does this help?

Zach! First things first and just for the record: I love GSAP and I never implied nor meant to imply that GSAP had anything to do with it, not even close I'm simply trying to understand what's happening and to hopefully come up with a solution. That's all. I could be totally wrong, but what I'm trying to achieve doesn't seem overly complex. It seems to me that animating one single SVG path shouldn't be as sluggish as it is on my end, even on a 5K screen. But again, I could be way wrong (it may just be my machine/browser/config/whatevs), it has almost 10 million pixels more to render after all so you may be absolutely right. Just hard to swallow that an older, inferior tablet without a dedicated graphics card, using a legacy browser that's what, 8 years old now, beats a much newer machine with an up to date browser. Since all other browsers do just fine it makes me think it's neither the hardware nor the screen (resolution) that's the culprit. My money is on Firefox/my specific config. Thanks for testing. I'll check it out on my retina Macbook at home this evening, curious to see how that handles it. Cool, I'll try that next. Thanks a lot!

@ZachSaucier Quick question, I've done additional testing on Windows and while it seems as though Firefox (latest version) is generally the slowest on Mac/Windows, it's exceptionally slow on my main workstation for some reason – a well maintained 5K Retina iMac (16 GB Ram, SSD, dedicated GFX card with 2 GB Memory) I believe. It does run a little sluggish on my old Surface 3 Pro too, but still way better than on my much more powerful iMac. Weird. What's funny is that even IE 11 manages adequate performance (once I got it to work). Every other browser – with the exception of FF – on the iMac/Surface draws the SVG quite smooth (as I would expect). I do feel performance degrades somewhat the further you scroll, but not too horrendously. So my question is, how do you perceive the performance in the above Pen on your end? You (and the others) never mentioned what your impression in regards to the performance/responsiveness is/was? In another test I tried adding another library (konva) into the mix – attempting to draw the SVG in Canvas while using ScrollTrigger. I feel like performance in Firefox is a bit better, but only slightly so (especially when scrolling by using the scrollbar, not the mouse wheel). The drawback is that the konva lib basically kills Safari as soon as scrolling happens. FYI: https://codepen.io/ynamite/pen/mdroPeK I'm gonna see if splitting the path makes any difference next, but would really appreciate some help on how to control that (start path B only once the end of path A is reached). Of course, any other tips on how to improve performance is greatly appreciated. I haven't quite given up yet. Thanks!