vektor
-
Content Count
31 -
Joined
-
Last visited
About vektor
-
Rank
Advanced Member
-
Aaah yes, didn't realise it was that new / unreleased, works fine in codepen 👍😎👍
-
I know this is a ScrollMagic issue but just adding that loading via require.js (magento2 flavour) doesn't work either. "Uncaught Error: Script error for: TweenMax http://requirejs.org/docs/errors.html#scripterror" Saw this https://github.com/jonkwheeler/ScrollScene, but cannot successfully load it via npm in Magneto 2. Anyway, until ScrollMagic fix it I'll just use the method above or maybe just start using IntersectionObserver to trigger animations
-
Thanks, what do you mean by the 'A section' though? I thought you meant the svg path itself but these are unchanged? Also, didn't know about alignOrigin: alignOrigin:[0.5, 0.5] // align with the center of the target! Useful, I was using offsetX & offsetY. FYI this isn't in the new docs https://greensock.com/docs/v3/Plugins/MotionPathPlugin Although in my production project, I've actually just gone back to using the offsets, as 'alignOrigin' seemed to have issues with my css resized svg path. Here's my simplified updated codepen, with added responsiv
- 10 replies
-
- 1
-
-
- seamless loop
- gsap3
- (and 5 more)
-
OOOOOOH!! 🤯 Never realise it worked quite like that! Thanks so much! ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
-
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 cor
-
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(
-
Aha, perfect, thanks!!
-
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 st
-
"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 <html> And then use the presence (or not) of that class as a hook in your script." Interesting, I will have to test this
-
Anyone found a way around this splittext indexing issue? About to start a new project & don't want to not use splittext...!
-
Ah yes didn't come across this one, looks promising, will have a read, thanks!!
-
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
-
Found the fix! This animation is within a Magento 2 project, which uses requirejs for everything, I switched from jQuery's $(function() {}) doc ready to require js 'domReady!' and the bug is not happening anymore So now looks something like require(['jquery', 'TweenMax', 'CustomEase', 'domReady!'], function ($) { // ANIMATE ? });
-
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 movin
-
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