tr en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en hbs_lat hbs_lat en en de en en en en en en en en en en en en en en en en en en en en es ru nb en es ru en en en si en en en en en en en en en en en en en es ru nb en es ru en en en si en en en en en en es ru nb en es ru en en en si en en en en en en es ru nb en es ru en en en si en en en en en en es ru nb en es ru en en en si en en en en en en en en en en en en en en en en en id en en en en en id en en en en en en en nb en en en en en en en en en en en en en en nb en en en en en en en en en en en en en ru en nb en ru en en en en en en en en en ru en nb en ru en en en en en en en en en en en en hbs_lat en lt en de en en en en en en en en en hu en fr en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
vektor started following Stop looping banner after a set amount of seconds? , How can I use GSAP 3 with scroll magic? , MotionPath Orbiting Items Seamless Infinite Loop Timeline Start Position and 3 others February 10, 2020
vektor replied to Page Tailoring's topic in GSAP
vektor replied to vektor's topic in GSAP
OOOOOOH!! 🤯 Never realise it worked quite like that! Thanks so much! ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
vektor replied to vektor's topic in GSAP
https://codepen.io/bananafarma00/pen/mdJyeeb?editors=1010 Thanks for the quick reply! I added this (see updated codepen) but it still behaves the same? Ah of course! doh! 💩 It does indeed..! It was part of my attempt to make it start in 'full orbit' - by making each item start and end at different points on the motion path. Obviously not quite right though! But this actually won't be necessary if I can get the 'progress' to start in full orbit (i.e. start after one full 'loop' of the timeline, so everything is in motion and spaced correctly at the beginning). Using 'progress' seems like the better/cleaner method if I can get it to work. Ah forgot about 'align', perfect! Ah didn't know that, amazing I think this is very platform specific so wouldn't worry about this one
MotionPath Orbiting Items Seamless Infinite Loop Timeline Start Position
vektor posted a topic in GSAP
Hello again! I've managed to make some items orbit infinitely 🥳 There are a few things I'm slightly struggling with: 1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..? 2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 🤢 so thought this was some kind of require.js error, but it also happens in the codepen demo. In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening? 3: Also, in this simplified demo, the items seem to not follow the path exactly..? (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? The 'items' are too small to need an offset? Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. Look forward to your response, thanks!! P.s. Loving version 3 !
Animate two items from the middle at the same time
vektor replied to vektor's topic in GSAP
Animate two items from the middle at the same time
vektor posted a topic in GSAP
Attempting to make two brackets animate from the middle to their positions at opposite sides of the page has proven to be more difficult than expected. You can see, commented out, in the codepen a few attempts and half-solutions. Method 1 is good and works without flex, however we are trying to make this work with flex if possible. Method 2 works with flex however the brackets start on contrasting sides of the page as opposed to both initialising in the middle - this could be an OK quick fix if used with something like opacity at 50% width to make it appear that they start in the middle - also not sure how to do this so any suggestions/solutions would be welcome! Method 3 is just an example of an issue which seems to have occurred multiple times while attempting to resolve this problem, whereby both lines of code work perfectly animating the individual element with the other line of code commented out, however attempting to make both lines of code together so far has not provided any results. Is this a bug perhaps? Is there someone out there who could provide a solution and perhaps explanation for these occurrences, and show me how to make this work - ideally with flexbox? Many thanks.
vektor replied to MindGamer's topic in GSAP
"But, you could choose to execute/not execute certain scripts based on the reported user agent. User a server side script to put a class on   And then use the presence (or not) of that class as a hook in your script." Interesting, I will have to test this
vektor replied to MindGamer's topic in GSAP
Anyone found a way around this splittext indexing issue? About to start a new project & don't want to not use splittext...!
Looping timeline startpoint offsets confusion
vektor replied to vektor's topic in GSAP
Ah yes didn't come across this one, looks promising, will have a read, thanks!!
Looping timeline startpoint offsets confusion
vektor posted a topic in GSAP
Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
Svg transform origin intermittent bug
vektor replied to vektor's topic in GSAP
Svg transform origin intermittent bug
vektor posted a topic in GSAP
Hi, there's a strange bug I've been coming across and not sure how to fix, it only happens very occasionally, but does always happen eventually if you keep refreshing. Seems like it's something to do with a wrong 'xPercent' calculation? I'm animating every svg elements y position from bottom to top, fine Then I am animating some elements to 'wiggle' their x and y positions. Sometimes the x axis seems to be wrong and they move much too far I originally thought the problem was because I was trying to animate the wiggle from the start, at the same time as moving everythings 'y' position. But I delayed any 'y' position animations until the first 'move up' animation was finished Funnily enough I can't seem to get the codepen to reproduce this bug... Making me think maybe it's network related, something trying to calculate before the svg is fully loaded...? Anyone seen something similar before, any idea what's going on? Is there a less troublesome way to achieve the same effect? I tried using 'x' instead of 'xPercent' but this made a jump in the animation and also xPercent is preferable as the image resizes a quite lot Thanks ?
Stop looping banner after a set amount of seconds?
vektor replied to Devotee007's topic in Banner Animation
Note I copied and pasted line 10 and it contains an invisible "\u00bb" character that may break things
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“...obviously GSAP is incredible.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.