
Wowzaaa
-
Posts
14 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by Wowzaaa
-
-
i'm sure he would answer me if he could but i was hopping there was someone else that can show me the error of my ways
-
anyone?
-
so can anyone point me in the right direction? i do not need the whole solution ... i just need to understand what am i doing wrong ... what am i missing?
-
i saw some examples online but all use jQuery's scrollTop();
my specific case is that body has overflow hidden ... so the is no actual scroll for the page
-
much appreciated
do u also have a suggestion for using the mouse wheel to rotate the people back and forth around the table?
thanks
-
so can u at least give me a suggestion on how to fix my original issue? the one with reverse?
thanks
-
simply awesome .. thanks man
-
Quote
The code for your path looks fine. But that's not going to visible, right? Isn't it just for the motion path?
right
QuoteIf so, I was suggesting to just skip that part as it's unnecessary, and you won't need to use snap. You can just grab the points for the Bezier tween doing what I described above. I can show you how if that doesn't make sense.
i think i understand .... but ... i use that because i plan to just give my shape a width and height ... and get the path back ... this is the first time i work with Bezier so building them dynamically is a bit ... unknown to me
at this point at least
are u telling me that my roundedRect function can return directly the bezier points?
thanks
-
thanks for the info ... makes much more sense now
one question though ... are u telling me that my current solution for building the path will not work?
function roundedRect(x, y, width, height, radius) { return "M" + x + "," + (y + 0) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius + "h" + (width - 2 * radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2 * radius) + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius + "h" + (2 * radius - width) + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius + "z"; }
i tested this and it does what i supposed to ... but maybe u are talking about the conversion to cubic Beziers ... if my path structure is ok .. wouldn't TweenMax follow it whatever shape it might have?
thanks
-
they should keep their place at the table ... what i will need to do after i fix this .. is to
1) make the table turn back and forth on mouse scroll
2) make the number of people dynamic ... that is why i build the svg on the fly ... when there are 100 people ... it won't be a circle ... it will turn into an oval (or a rectangle with rounded corners with a radius of width / 2) ... so the visible part will still look like half a circle ... but the invisible part will not look like now
thanks
-
-
-
Hi
So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever
but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever
var timeLine = new TimelineMax({ repeat: -1, paused: false, yoyo: true });
timeLine.add(TweenMax.to(arrPeople[i], totalTime, { bezier: { type: "cubic", autoRotate: true, values: points }, force3D: true, repeat: -1, yoyo: true, ease: Power0.easeNone, onUpdate: function() { if (this.target == arrPeople[0] && !initialized) { let children = timeLine.getChildren(); if (children[0].time() >= totalTime - totalTime / people.length / 2) { timeLine.paused(true); initialized = true; } } } }), (i + 1) * totalTime / people.length);
this is the code i use to create the timeline and the tweens
any sugestions?
thanks
infinite animation stops looping on reverse
in GSAP
Posted
solved it ... nevermind