Jump to content

Dipscom last won the day on May 18

Dipscom had the most liked content!

Dipscom

Moderators
  • Content Count

    1,472
  • Joined

  • Last visited

  • Days Won

    57

Dipscom last won the day on May 18

Dipscom had the most liked content!

Community Reputation

2,676 Superhero

7 Followers

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

8,425 profile views
  1. Alright, I understand now. Not that I can do much about this... 😛 @GreenSock himself will have to take this apart to see what's going on. It's above my paygrade. Just hang on there for a bit until he can get to the bottom of this. Thanks.
  2. This is so beyond me I don't even think I understand what's going on... But, I do know we will need some way to see the issue. I understand it's something to do with Joomla, not GSAP itself but, do you think you can get a minimal installation somewhere that highlights the issue? Also, what is the issue? I'm not sure I follow what went wrong.
  3. Animating grid-gap is not yet supported. It's on the horizon but hasn't arrived yet.
  4. The boxes are moving out of position because (in Mikel's example) the Tween is set to be relative { y:"-=50" } so, whenever the intersection observer triggers, GSAP will tell the box to move from wherever it is plus another 50 units. Use absolute to stop that. Another thing to consider is to check if the box is already animating before creating the tween. The intersection observer fires when the element is entering the viewport and exiting so, depending on the speed of your scrolling or size of your viewport you might fire the call before the animation is finished. And, remember that you are moving the very same element that you are observing so, if you are observing when it enters or leaves viewport and you move it as it enters or leaves the viewport, there is room for triggering more events than you intend to if the movement brings/removes the element from the view.
  5. Ikai, look at Mikel's post - That's the answer to your struggle.
  6. I've said it before and I am not ashamed to say it again. I am scared of StackOverflow... You can add a Polyfill to cover the rest of the browsers (erm... IE) that do not support it. It's pretty good from what I have worked with. There are several. Bellow are a couple of discussions I can remember from the top of my head:
  7. Oh wow. So simples, so nice. I is *totally* jealous. Be ready to be ripped off without warning.
  8. Hello Ikai, Welcome to (the non-lurking side of) the forums! To me, it sounds like you should just look into the Intersection Observer API - with it you will be able to have each box fire a call to animate itself when it comes into view fairly easily.
  9. Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.
  10. Hi again Ronnys, I have no idea myself. @GreenSock will be able to answer that when he shows up.
  11. To elaborate on what Mikel is pointing to: You need to be a member of Club GreenSock to use the premium plugins outside CodePen. You can try all that GSAP has to offer in CodePen but you cannot use the premium plugins available in CodePen outside it. It's also worth noting that you are not purchacing anything. You're joining a club, with that you have access to plugins not available to the general public. You won't own the plugins or anything like that if you join the club.
  12. You're in for a world of pain, I'd say. The kink you have in your concept is that GSAP needs to know the starting path and the ending path. Right out of the bat you will have to figure out a way to create a brand new path right at the start of this scrollEvent that is based on this in-between state path that you are describing. I don't know from the top of my head how to do it and can't really spend the time to research it. The good news is that would be the hardest thing. Once you have this new path you create a new tween to go from it to your path 'c' as the user continues to scroll. What happens next will dictate how much more pain you'll subject yourself to. If nothing else happens once the scroll is done. Fine, you're in the clear. If it needs to animate into another shape, get your logic hat on and plenty of coffee. My suggestion to you is to read on how you can generate a path based on a path. It really could be as simple as duplicating a node. Actually it does sound like that's all you need to do. Hum.... Just pause the looping animation and fire out a new morphing tween with the desired target path. Trigger those events like Craig described above. Proof of concept: https://codepen.io/dipscom/pen/ac616f5a247c7442a883b1ea9a4de9a5?editors=1010
  13. Yeh, why go all bloodthirsty murdering rampage? What has this timeline done to you to deserve such violence?