Jump to content


  • Posts

  • Joined

  • Last visited


9 Newbie

About wcomp

Recent Profile Visitors

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

  1. Does anybody have any links to a Codepen or other demo that demonstrates how to accomplish this using GSAP and vanilla JS? It's super simple really. Just a card that expands when you click it (without transform scaling the contents of the card), then goes back to its original size when you click outside of it. https://codepen.io/tt9/pen/NeZmwO
  2. How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });
  3. Hello Everyone! I'm a musician developing a website that will showcase the music I record and I finally finished the animated grid that will house the individual songs. Here is a short little video clip of what I've got so far: https://youtu.be/A1_vvNTHCCU. All the graphics and logos are rough sketches by me but will be professionally done ultimately. The behavior is 99% exactly the way I want but I'm concerned about the implementation. I'm looking to hire a javascript/GSAP expert to look at my code and refactor it as necessary to make it as efficient and fast as possible. Because I'm so new to programming in general, I'm sure there is a better, faster, more efficient way to accomplish all that, I just feel like it's probably gonna take me another year of studying before I know enough to nail it down. If anyone is interested please send me a message. My budget is really whatever it takes to get top notch work, within reason of course. My main priority is getting the best possible implementation of this concept for this site project and also learning along the way. Thanks for y'alls help! Will
  4. Can you pass a timeline to a function as an argument? Here is the pen. The animation refuses to play. lol. The code looks like this: var tl1 = new TimelineLite({paused:true}); tl1.to("#playhead", 1, {left:"100%", ease:Linear.easeInOut}) function over(timeline) { timeline.reversed() ? timeline.play() : timeline.reverse(); } function Binding(){ $("#next").on('click', over(tl1) ); } Binding(); Is there a way to do this?
  5. Thanks! Didn't think of that. What would be the benefit of doing it that way as opposed to having it twice in the markup? Just less clutter in the code?
  6. Hey! Yeah. I know I can do it that way. I need the lower one to become visible before the upper one is completely off the page though. How can I do that with one distinct element in my markup? Is that possible?
  7. Is there a way using GSAP to achieve this effect using only one ".bluebox" element? To wrap the element in a sense? The fact that it is coming into view on the lower line before it is fully out of view on the upper line requires that there be two .bluebox elements. Is there a way to do this kind of thing with only one element? Thanks!
  8. That's very cool, a tad over my head though at this point. Lol. And I cant't seem to find much documentation on it. I'll keep messing with it until I have it figured out. Thanks!
  9. Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!
  10. Hey! I do have another question though. Is there anyway to round the progress or time values that are returned by the progress() and time() methods? The hover behavior is dependent on the accuracy of those values. I noticed that when I increased the speed of the animation, say to .4 seconds total, the progress values don't always register as being exactly .5 or 1 when they ought to in the sequence. Check this out: The console logs 0.49999999999999983 when it should be right on 0.5. This prevents the hover animation from behaving like it should. I fixed it by changing progress() to time() but even then I had to add >= .6 because the console is logging 0.6000000000000002 instead of right on 0.6. Like this: Is there any way to round the precision of the progress() and or time() methods so that they fall where they should? Also which do you think would be better suited for this task, progress() or time()? Thanks!
  11. Thanks! Those codepens look amazing. Some great ideas. I managed to get it working using an extremely tedious process of creating nearly 40 different paths using Inkscape's "patten along path" function (to use like animation frames) and then morphing them using morphSVG plugin. It works but its not as precise as I had hoped. I'm thinking I'm gonna check out the sprite option. Thanks for the response!
  12. Ok. This one is killing me. I've spent two days on it already. I think I just need to know more about nested timelines and labels. But here it is: -When the mouse pointer enters the "Hover Button" I'd like the playhead to play until 50% of the animation has completed, then stop. -If the mouse pointer leaves the "Hover Button" before the playhead reaches 50%, then the playhead should reverse, heading back towards the start of the timeline. -If the mouse pointer leaves the "Hover Button" after the playhead has reached 50%, the the playhead should reverse back to the 50% position, NOT all the way back to the start of the timeline. This much so far I've got, although I used two separate timelines back to back with a number of "if" statements using the progress() method to accomplish this. I'm sure there is a more elegant solution using only one timeline, I just can't seem to find it at the moment. The problems come when the timeline reaches 100%. -After the playhead reaches 100%, I need everything to reset back to it's initial state on load. So, in other words, after the playhead reaches 100%, it should snap back to the very start of the timeline and all of the above described behavior should repeat itself all over again. This is whats giving me trouble. I have tried using pause(0), seek(0), time(0). None of those seem to be resetting things without adding extra unwanted stuff to the hover behavior. By the way, when I say timeline here I am referring to the red line on the codepen demo. Not either of the two separate back to back timelines I used to get what I've got so far. Any ideas? This one is frying my brain. Lol. Thanks for any help! Here is the codepen:
  13. Interesting. I was looking at Blender as a possible solution. I've almost got what I needed using the "Pattern along Path" effect in Inkscape and the MorphSVG plugin. Although I'm having some issues with odd morphing behavior. I'll probably post about that soon. Thanks!