Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About wcomp

  • Rank

Recent Profile Visitors

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

  1. Does anyone know where I can find examples of page transitions that are similar to these two codepens I made? I am looking for a "zipper" or "ripple" effect but can't seen to figure out a good way to approach it. My code is overly complex. I know there has got to be an easier way. Usage of SVG or JavaScript libraries is totally fine. I would love to look at some examples for inspiration. Thanks for any guidance. different example : https://codepen.io/Wcomp/pen/wvBxraW?editors=1010
  2. I am having trouble getting this to behave. I have an animation that is occurring inside of an element that is also being animated (or changed). The issue is that when the outer element changes size, all of the values for the inner animation are not adjusting to the new size. In the codepen you can see this by clicking the start button and then either resize the output window or click the enlarge button to enlarge the outer div. How do you solve this. How do you tell the tween to pay attention to the values if that change? Thanks.
  3. 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
  4. 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 });
  5. 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
  6. 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?
  7. 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?
  8. 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?
  9. 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!
  10. 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!
  11. Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!
  12. 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!
  13. 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!