vektor
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by vektor
-
-
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
-
On 2/7/2020 at 6:02 PM, ZachSaucier said:
The fix for MotionPath not working with your path because of the A section is now live on CodePen. Here's a minimal test with your path:
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 responsiveness, in case anyone finds it useful. (It's not starting in 'full orbit' anymore for some reason, but not worried about that as it works fine in the real code)
See the Pen yLNNYJM?editors=1111 by bananafarma00 (@bananafarma00) on CodePen
Thanks for the help! ✨
- 1
-
Just now, ZachSaucier said:
That's because you have GSDevTools enabled. It controls the progress of the animation.
OOOOOOH!! 🤯 Never realise it worked quite like that!
Thanks so much! ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
-
See the Pen mdJyeeb?editors=1010 by bananafarma00 (@bananafarma00) on CodePen
Thanks for the quick reply!
1 hour ago, ZachSaucier said:masterTimeline.progress(0.99999);
after you've added everything to the timeline seems to work fine for me.I added this (see updated codepen) but it still behaves the same?
1 hour ago, ZachSaucier said:This error is telling you that the properties
start
andend
don't exist on the objects.start
andend
are properties of themotionPath
.Ah of course! doh! 💩
1 hour ago, ZachSaucier said:However I'm not sure what your goal is with them. So just putting that in your tween has a weird behavior currently
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.
1 hour ago, ZachSaucier said:You didn't use the
align
property of themotionPath
, so they are aligned to their initial position on the page. To align them to the path, usealign
inside of themotionPath
object:Ah forgot about 'align', perfect!
1 hour ago, ZachSaucier said:Side note: You can use the condensed form of eases in GSAP 3 if you'd like. I love using
"none"
instead ofLinear.easeNone
for example. It also makes imports easier.Ah didn't know that, amazing
1 hour ago, ZachSaucier said:It looks like something weird is happening related to the A command that you have in the path. If you remove just the part related to that A command it works fine for me. We'll look into and get back to you.
I think this is very platform specific so wouldn't worry about this one
-
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 !
See the Pen JjdooQW?editors=1011 by bananafarma00 (@bananafarma00) on CodePen
-
Aha, perfect, thanks!!
- 1
-
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.
See the Pen LYYXNgy by lyndonfarrvektor (@lyndonfarrvektor) on CodePen
-
SEO and GSAP
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 <html> And then use the presence (or not) of that class as a hook in your script."
Interesting, I will have to test this
-
SEO and GSAP
in GSAP
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 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!?!
See the Pen jjbbwB?editors=1111 by bananafarma00 (@bananafarma00) on CodePen
-
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 ? });
- 1
-
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 ?
See the Pen dLBENq?editors=1011 by bananafarma00 (@bananafarma00) on CodePen
-
On 8/26/2015 at 3:38 PM, Carl said:
Yes, you can use [docs id=js.TweenLite.delayedCall()" linktext="TweenLite.delayedCall()] to wait any amount of time and then fire a function that stops a timeline like:
var tl = new TimelineMax(); var maxAnimationTime = 5; TweenLite.from(".banner", 0.5, {autoAlpha:0}) tl.staggerFrom(".box", 0.3, {y:-50, opacity:0}, 0.1) .from(".gs-logo", 0.5, {opacity:0, scale:0.5}, "rotate") .to(".box", 1.6, {rotation:360, ease:Linear.easeNone, repeat:-1}, "rotate") TweenLite.delayedCall(maxAnimationTime, stopAnimation); function stopAnimation(){ tl.pause(); }
See the Pen oXKKVJ?editors=001 by GreenSock (@GreenSock) on CodePen
Note I copied and pasted line 10 and it contains an invisible "\u00bb" character that may break things
- 1
-
Still an issue for me unfortunately
Update: Applied the style to the element specifically (I had a couple of spans inside a h2) and it helps! ?
( Still a little jump but luckily not very noticeable :)
- 1
-
SEO and GSAP
in GSAP
One of the sites I am working on has fade in animations and uses css .animin{visibility:hidden} and then TweenMax.set(".animin", { visibility:"visible" }); to stop flash of content before the javascript is loaded.
I can confirm that this text is currently NOT being indexed by Google. (The other non-animated pages are fine)
I will try adding a <noscript> style to see if that helps! Will post the results
Anyone else had experience with this issue?
Update:
test1: I added the <noscript> style and now googling text from the page in quotes returns the correct page. The only thing is that there is no bold highlighted copy in the SERP preview, it just shows the meta description. Not sure of the implications of this?
test2: Removing the .animin class from the text returns the correct page when searched, no SERP bold preview text
I'll wait and see if test1 results change
Update2:
I can confirm that text that has been 'splittexted' is not being indexed. I have used this, I assume that will help
onComplete: function(){$splitTxt.revert()}
Update 3:
Any SplitText text is still not indexed in Google, even after an onComplete:revert(). Anyone else come across this issue before?
-
- 3
-
??????
- 1
-
Aha!
Yes fixed thanks
How can I get this updated non codepen only version?
-
Ah silly, yes I missed the 'codepen only' bit
Fixed here
See the Pen JaLgNN?editors=1011 by bananafarma00 (@bananafarma00) on CodePen
- 1
-
Cool
Did some more tests, removed the tweens from the loop in case that was causing an issue. Also tried removing tspans, still the same result ( codepen below )
See the Pen yxKNdq?editors=1011 by bananafarma00 (@bananafarma00) on CodePen
-
Hi,
I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG )
Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter
Can't work out why? Is there a workaround to force a specific length?
Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference
?
See the Pen jvZoqm?editors=1011 by bananafarma00 (@bananafarma00) on CodePen
-
???
If I use that modified Scrambletext.js in my project I get this error
QuoteUncaught SyntaxError: Invalid regular expression: /[-]|�[�-�]|�[�-�]|[⚔-⚗]|�[�-�]|[�-�][�-�]/: Range out of order in character class
at new RegExp (<anonymous>)
at ScrambleTextPlugin.min.js:13
at ScrambleTextPlugin.min.js:13I will keep using my manual loop anyway in this case, as I am now also checking for classes and applying other animations accordingly
-
??
Cheers guys, getBBox() is what I was looking for !!
The cloning method is clever too, wouldn't quite translate to my real life project though
The forum post on SVG gotchas about BBox was very helpful ?
- 2
MotionPath Orbiting Items Seamless Infinite Loop Timeline Start Position
in GSAP
Posted
Aaah yes, didn't realise it was that new / unreleased, works fine in codepen 👍😎👍