Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

tganyan's Achievements


Newbie (1/14)



  1. I'm trying to basically add functions to a timeline and get them to play one after the other. I feel like I've done this before but I can't seem to get it to work this time. I don't have an active codepen for this at the moment, apologies for that, but I think the issue is fairly straightforward so a codepen may not be necessary in this case (if it's called for in the replies I'll throw one together). Code adding function to timeline: tl.add('frame-1'); tl.add(frameTimeline('f1'), 'frame-1'); if (feed.F2_Headline_1) { tl.add('frame-2', 'frame-1+=3'); tl.add(frameTimeline('f2'), 'frame-2'); } frameTimeline function code: function frameTimeline(frame) { const frameTimeline = new TimelineMax({paused: false, repeat: 0}); buildFrame(frame); return frameTimeline; } buildFrame function code: function buildFrame(frame) { let splitText1 = ''; let splitText2 = ''; let staggerDuration1 = 0; let staggerDuration2 = 0; let lineDuration = 0; headline.innerHTML = frameHeadline.replace(/\n/g, '<br>'); subhead.innerHTML = frameSubhead.replace(/\n/g, '<br>'); splitText1 = new SplitText(headline, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'}); splitText2 = new SplitText(subhead, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'}); lineDuration = 3 / (splitText1.lines.length + splitText2.lines.length); staggerDuration1 = lineDuration * splitText1.lines.length; staggerDuration2 = lineDuration * splitText2.lines.length; tl.staggerFromTo(splitText2.lines.reverse(), staggerDuration2, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration); tl.staggerFromTo(splitText1.lines.reverse(), staggerDuration1, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration); } I left out a huge switch statement that's in the buildFrame function because that function is working as expected and I felt it would blow up the post unnecessarily. The basic point should be pretty well illustrated by the first two code snippets in which I am trying to run the frameTimeline function once for the start of the timeline (frame-1 position) and then if there's a second headline in the feed I'm working in run the function again but for frame 2 after frame 1 is done. The current behavior is that the timeline just waits and then runs frame 2 without ever showing frame 1 (although the function does run when debugging with breakpoints). Again, if a codepen example is helpful here I'll add one, I just didn't because I wasn't convinced it was worth the effort given that the issue SEEMS pretty clear to me. Thanks in advance for any help on this!
  2. Dude, you are a rock star. I was losing my mind hahaha
  3. I'm trying to create an animation with a sprite sheet but things are not going as I expected. It seems very simple: I have a 40 frame horizontal sprite image so I have a .to tween that using stepped ease with 40 passed in to the config. The image is absolutely positioned and is set to move -4000% to the left (40 * 100). I've done this with other sprite images before with no real issues so I'm at kind of a loss for why this doesn't seem to be working. The main issue is: The image does not seem to be "stepping" but is just smoothly transitioning through as if there were no stepped ease. A fresh set of eyes and some veteran advice would be greatly appreciated here.
  4. Thanks! Looks like I'll have to read up some more on svg masks; I have an understanding of what a mask is/does generally speaking, but I still am not quite sure I understand why this particular mask is getting the desired effect. Which I'm sure comes down to a lack of intuition on this from being less experienced. Update: Nevermind, I definitely get it. I hadn't noticed that the target element in the js was changed to the mask and not the regular motionpath. On initially looking at the markup, I thought just the motionPath was still getting animated and it made no sense to me, this does though.
  5. So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.
  6. Thanks again for the quick reply. Frankly, I have no idea why applying it all to a timeline wasn't working before (the explanation you provided aligns pretty much with my understanding of the distinction between tweens/timelines). I forked your codepen over, since there's less mess in the js, made the switch and it all works just fine so there must be something in the other codepen that's causing a problem there. That code was quickly becoming spaghetti anyway, so best to just start fresh.
  7. Man, this community really is awesome on the feedback, both in speed and clarity. Thanks a ton to both of you; I've been a dev for a while now but just have never had to do much with SVGs so this is sort of a mystery box for me. I have one more question. This one is purely gsap related and not necessarily directly related to the SVG animation stuff, but it's tripping me up a bit and reading the docs isn't quite clarifying things to the level that I'm looking for: What is the functional difference between something like "TweenMax" and "new TimelineMax". Optimally I would be tying all of this in to a singular timeline, i.e. "const tl = new TimelineMax() . // tl.to(bezier stuff)", but when I try to switch that in for TweenLite the animation fails (no error messages, just no animation). I have a general understanding of the high level difference between the two, but the literal issue I'm trying to address is this: I want to be able to add labels at any given point in my timeline and that seems to error using TweenMax/TweenLite, but if I switch things over to using a timeline the bezier animation fails. Is there a good solution to this? Just want to say again that you guys rock, it continues to blow me away how responsive and friendly people are in the forums here.
  8. Ok, so as I get closer to what I'm actually trying to build, I've come up on a couple more issues that are of note. I have a couple things in mind that I could do to solve these two issues, but might as well mention them in case there's a simpler, more straightforward solution than whatever hacky solutions I may think up. This is in the same codepen. I now have a dashed line that the arrow follows, and it works just fine with 2 exceptions: 1. The arrow is traveling from right to left instead of left to right and I really have no clue why this is happening (my random guess is maybe it has something to do with the motion path and the start/end values that gsap is looking for?). Using .reverse() method on the motionPath array fixes the issue (which is the current state), but I want to make sure there isn't something more fundamental here that I should be aware of. 2. The arrow spins around at the end of the path, which is unwanted. It seems like this has to do with the autoRotate setting (no spin when I remove that), so it might be as simple as figuring out a way to force it to stay in its current position before it tries to spin back around. Again, this is something that I'm confident I can cobble together something that fixes it but I want to be sure I'm not missing something fundamental in how this works and possibly there's a setting that I'm not finding in the docs that handles this well. https://codepen.io/tganyan/pen/JVKREg
  9. That's exactly what I needed. From just a quick glance, it looks like you just got rid of the xPercent and increased the yPercent, as well as specifying 90 for the autorotate. When I have a minute I'll take a closer look to see if you did anything else there, but I think largely it comes down to just a lack of experience with SVGs and with this plugin. Thanks!
  10. I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).
  11. I'm in the middle of dogfooding GWD for my own company and recently approached this same question just so I could at least address it in my notes. It is possible, and fairly easy, to integrate GSAP with GWD: Switch to code view Paste the GSAP CDN in the head along with the other CDNs in there Write GSAP code as you normally would inside a script tag The issue here to me really comes down to your reasons for needing to do so (does the need and benefit of having a GUI outweigh the clunkiness to process that would result from integrating GWD and GSAP). First of all, the code editor in GWD is far and away inferior compared to almost any other pure code editor, so it's an immediate step down in that regard. Secondly, you have a balancing act now between the GWD css based timeline of animations and what GSAP is doing; it's not impossible to coordinate by any means, but just an extra context switch that really shouldn't be necessary. Thirdly, integrating it into GWD doesn't really gain any advantage from the GUI because all GSAP stuff would still have to be done in code view, so there will still be scenarios where those who are less code friendly will need to either learn it or pass the task to someone who is comfortable in that environment (not to mention that this doesn't help consistency, i.e. someone accomplished an animation in a more complex way with GWD and tons of keyframes, but then someone else accomplishes a similar animation in a few lines of GSAP, and now you have two ways to skin the same/similar cat in your creatives). Finally, just an extra small kink in the hose, it seems that the editor in GWD (design view) doesn't acknowledge any GSAP code; you have to open up a preview to see it work, which can definitely slow you down. I know this is an old post, and for the sake of the OP I hope it no longer applies to you haha, but in case anyone else is looking this kind of thing up I thought I'd add my long winded reply based on recent experience.
  12. Good to know either way, if wisdom is conventional there's almost always a good reason for it haha. Thanks again for the assistance!
  13. Thanks! As stated in my original comment, I tried x and y but still had the same issue. It looks like clearing it has fixed the flicker. Just curious though, is there another reason why x and y would be preferable to absolute position values in this case?
  14. So I'm still pretty new to GSAP and just playing with simple shapes and movement to get a full grasp of things. I have a timeline that triggers a secondary timeline that repeats until user clicks somewhere on the body. All of that works just fine, but I'm noticing that when the secondary timeline starts (tells the div to just move to a random location over and over), a lot of the time it flickers badly before its next movement. This doesn't happen every time but happens most of the time (same in both Chrome and Firefox). I've tried animating both left and bottom properties, and then changing it to x and y to see if it made a difference (based on the advice I saw in another post), and neither seemed to have any impact on the issue. Some clarity on what I'm doing wrong here would be awesome!