Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

tganyan's Achievements

  1. I have updated the one with intended behavior to use a green box with text instead of the placeholder image, hopefully that helps the issue. Although, I'll reiterate that the placeholder image was not the only thing in there and there's a standard container with a solid 1px border, so it's very odd that you literally would not see anything at all. Are there any known pitfalls with codepen and this kind of thing that I may not be aware of? Some kind of setting I should have on the pen to ensure it shows here? I've posted this way in this forum several times and have never had an issue. EDIT: I've now updated both pens to only be using simple colored divs, no placeholder images or anything. Hopefully this helps (working pen has some wonky stuff going on right now and I'm only able to edit a little bit at a time today, so might be more useful to focus on the initial pen).
  2. I'm using images from placeholder.com and they're showing just fine from what I can see, not sure why you wouldn't be seeing anything. Are you literally not seeing anything at all (seems strange that neither Nico or Jack mentioned not being able to see my pen)? Because part of it is a container with a solid border, so you should at least be seeing that even if for some reason the placeholder images aren't showing. I'll look into the clip path reference you linked, I just remember having a really difficult time getting standard rounded corners to work with a clip path when I've tried it in the past. I've been trying to counter scale it and it's just being really counterintuitive and difficult to figure out, will just keep hammering at it.
  3. Thanks for the great responses. This at least gets me closer to what I need to do, although changing to x/y and scaling has introduced a new challenge. The intended effect of this is that the outside container shrinks and moves, but the image inside does not shrink or move with the container. The pen in my initial post shows this, linking it again below. I'm currently working with this in a separate pen (wanted to leave the initial one as-is so things don't get confusing in this thread). It seems that changing the values to scale and x/y is suddenly forcing the image to shrink and move with the container, which is definitely not the intended effect. Also, given Nico's very helpful response with the clip path, I should also mention that the container needs to have rounded corners so I think clip path is out (to my recollection you can't have border radius with clip paths, but keep me honest there). I'm continuing to work on it as time allows, but any tips of suggestions on this would be greatly appreciated! initial pen (with the jerkiness): https://codepen.io/tganyan/pen/YzQELEr working pen (attempting to get x/y and scale to play nicely): https://codepen.io/tganyan/pen/YzQYQWm
  4. My issue is pretty straightforward. The linked animation isn't totally smooth; if you watch closely, it's got a subtle jerkiness to it and I have no idea why. I've seen a few posts similar to this but haven't found any solutions that seem to work for me, so any insight would be much appreciated. EDIT: I should also share that I found a post that mentions putting a super subtle rotationZ setting on the animation, but it didn't seem to impact anything when I attempted it (either it doesn't work for my issue, or I didn't understand the solution well enough and didn't implement it correctly)
  5. Thanks, this is a lot to look through. Currently reading your tutorials to see if this helps clear things up, but having the hurdle that I'm like 85% dev and maybe 15% designer, so I don't have direct access to some of the tools (AI) and don't have enough of a nitty gritty comfort level with svgs to do some of the prep that seems to go on in those tutorials (relying on designers to prep these for me). As such, struggling a lot so far to adopt what I currently have to work with, which is basically just a free sample SVG from Creative Fabrica that more or less mimics what I'll ultimately need to animate, to what you've shared so far (in case I'm not being clear, this is a shortcoming on my end, not a criticism of the wealth of info you've shared with me here). Going to keep reading, but was hoping (perhaps naively) that there would be something a bit more out-of-the-box that could do this for me. I guess I don't get to be lazy today Thank you for all the info you've shared so far!
  6. I am trying to test out the drawSVG plugin to see if it will work for something I need to build, but I literally can't seem to get it to do anything and I'm not sure why. Initially I set up my own pen independently, with no luck, and then decided to fork the demo pen to make sure I'm not including any resources incorrectly. I have no real particular goal here, except to just get it to do anything at all, which at the moment it is not. The code here is intentionally extremely simple; I feel like there must be something pretty obvious that I'm missing, hoping someone can set me straight.
  7. 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!
  8. Dude, you are a rock star. I was losing my mind hahaha
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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
  15. 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!