vm6ej04

Answer to my own question regarding emitter position. I corrected the emitting position, align it to the centre of the arrow by getting the bounding box, using getBoundingClientRect() and just offset the emitting position accordingly. http://codepen.io/vm6ej04/pen/NpZNRw

Thanks a lot!

Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!

Thank you for the reply, it helps me understand it even more. I'll re think my strategy when it comes to animating same objects..

Hello GSAP forum! This is my first thread, hope I post it within the rules around here. I've been using GSAP for quite a while now, but there are still a lot of aspects that I couldn't comfortably say I've figured them all out. Such as overwrite, invalidate, restart, stop, seek and so on... I've been reading docs, search on Google, forum post etc, I still can't figure out the most simple things. Question: In the codepen sample, what should I do so whenever I click on buttons the line goes to left or right from wherever it is when the button is clicked. Multiple times. I seriously couldn't figure it out. Any help would be appreciated. Thank you

Almost 6 months after that I'm facing a similar problem... Initially on the project I was working on, the scrollTo:{#idName} Didn't do anything, later on I realised I have to be on version 1.90 or later, so the scrollTo works great after that. NOT until I test it on iOS 10.2.1 on my iPhone 6, I've stripped down everything to make it as simple as possible, the scrolling is choppy, and stops very often in the middle of scrolling. Here's the codepen https://codepen.io/vm6ej04/pen/rydGwx Any idea...? The simulator on Mac works, but not on the actual phone. There isn't any error in the console, I don't know where to debug is from.. Here's a video recording of what I'm talking about https://youtu.be/03lck9Bc5SU