Jump to content

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

Visual-Q last won the day on June 12 2019

Visual-Q had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Visual-Q last won the day on June 12 2019

Visual-Q had the most liked content!

Community Reputation

805 Leader

1 Follower

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

2,757 profile views
  1. You could use an onRepeat callback with a Yoyo https://greensock.com/docs/v3/GSAP/Tween https://codepen.io/Visual-Q/pen/GRqWovb on an onComplete without a Yoyo https://codepen.io/Visual-Q/pen/wvWJMRW
  2. This is just a guess as I'm not a vue guy and it's hard to troubleshoot just from code and an image but the fact that it works on reload might suggest that scroll triggers are trying to intialize before items are fully loaded in to the DOM. On reload the elements may be already cached so scrollTrigger can find their positions and properities straight away.
  3. A simple way might be to animate left value 100% to 0%. Instead of a transform. We usually recommend transforms as they are more performant but in your case the animation is simple enough it may work fine just with left movement. Another way would be to add a screen resize event listener and reset the x value and/or timeline accordingly. If you are able to make a codepen of it we may be able to assist more effectively.
  4. Yeah, you don't have to look at it in terms of vs GSAP. Lottie/Bodymovin plays nice with using gsap as a control structure. The one instance i had to use it was when I had a bunch of stock vector icon animations in AE and used BodyMovin to export them for the web, and gsap timelines to control them together with scrollMagic. With the new ScrollTrigger in gsap they should pair up even better. So you can have the best of both worlds. There are several examples on copepen of using them together.
  5. For a consistent velocity you could pass a calculated value to duration something like this: distance: https://www.purplemath.com/modules/distform.htm distance equation simplified by @OSUblake : Math.hypot(x2 - x1, y2 - y1) speed: whatever you want duration = distance/speed EDIT: Pen has been updated to utilize Jack's function with Blakes equation (see following posts): https://codepen.io/Visual-Q/pen/gOrVEmE
  6. I don't know what kind of device you are using but it you can adjust the resolution - for instance halving that would still look plenty sharp at a distance and you'd only be rendering 25% as many pixels.
  7. It does seem problematic with using toggleClass. I could set it to reverse but toggleActions did not seem to prevent the class from being removed at end of trigger. Is this expected? I would have expected "play none none reverse" or "play none reverse none"should have prevented the class from being removed when it reached the trigger end? You could animate the filter value using css variables instead: https://codepen.io/Visual-Q/pen/poyBgoG
  8. I quite like that effect from the site you showed: https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well. https://codepen.io/Visual-Q/pen/RwadBgG
  9. You could do several things: I might use an onComplete like this. However one other thing you need to consider is what happens if you scroll during the intitial animation, you would probably also want to be preventing window scroll during this time as well. Note: with the scroll disable on the window you don't have to wait to init the scrollTrigger timeline in the function but I showed it that way so you can see how it waits for the onComplete before the markers appear. https://codepen.io/Visual-Q/pen/JjXzGQL
  10. Visual-Q

    onPause event

    I'm not exactly understanding what's supposed to be happening however I'll take a stab in the dark: I believe you can use !isActive() / isActive() to test for pause and resume and I'm not sure why you need to check onUpdate. Presumably your play pause buttons are supposed to initiate these events so you could attach a function to the button actions to check if a timeline is paused or running and do what is necessary at that point.
  11. Improved example of previous: This will prevent duplicated tweens being created if buttons are errantly clicked, and waits for end of current iteration on timeline before adding tweens, so you don't have to tell it to replay from start. https://codepen.io/Visual-Q/pen/RwaELbw
  12. Basically just added a parameter to the function, function ifElseAnimateBorder(ring) we pass the parameter value [ringx] in the delayedCall gsap.delayedCall(2, ifElseAnimateBorder,[ring1]); and use it as the target for the tweens added to the timeline .to(ring, 2,{scale: 1.3, ease: "power2.out"}, 0) then tell the timeline to play from the start you could also use restart instead. buttonPulse.play(0);
  13. Was this what you meant: https://codepen.io/Visual-Q/pen/ExKOpQZ or this https://codepen.io/Visual-Q/pen/oNxQPXM
  14. Yeah I'm not seeing how pinning works into what you're describing. The problem is the pinning and animation starts when the container hits the top of the viewport. I think you're looking at a separate trigger for the animation, something like this. I also removed the need for the container to be at least 100vh so it can take the height of the content by putting the end section in the same parent. https://codepen.io/Visual-Q/pen/bGpQLMv
  15. If you don't want to overflow the end section you also need to force the container to include the height of the floats with a clearfix, on the .innerWrap, and .bg_red height:auto since 100vh doesn't always enclose the content and .bg_red min-height:100vh will then make sure the first panel also won't extend past it if auto height is less than 100vh. https://codepen.io/Visual-Q/pen/ZEWmbZL I would suggest using flex though, floats are not really necessary anymore a flex is far superior. https://codepen.io/Visual-Q/pen/YzqRyOj