vm6ej04
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by vm6ej04
-
-
Thanks a lot!
To get the arrow to very closely follow the black path try adding:
TweenLite.set("#arrow", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50});
see it:
See the Pen Rpmdmv?editors=0010 by GreenSock (@GreenSock) on CodePen
Unfortunately, I don't have time to wrap my head around the other issues at the moment, but perhaps its enough for you to make some progress or sort out some of the other things. Not so sure how much I can help with that particle emitter.
-
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, thescrollTo:{#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
See the Pen rydGwx by vm6ej04 (@vm6ej04) on CodePen
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
- 1
Animating along path, auto rotate transform origin
in GSAP
Posted
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.
See the Pen NpZNRw by vm6ej04 (@vm6ej04) on CodePen