Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/29/2019 in all areas

  1. Split it twice and you'll be good to go. https://codepen.io/PointC/pen/pxBMvy Happy tweening.
    3 points
  2. Glad you found a solution. If your goal is to get rid of any transforms, you don't have to pass in that long matrix3d() value. You could do any of these: tl.set('.text2__hidden', { transform:"none"}); //or tl.set('.text2__hidden', { clearProps:"transform" }); //or explicitly reset things: tl.set('.text2__hidden', { x:0, y:0, z:0, scale:1, rotation:0, skewX:0, skewY:0, rotationX:0, rotationY:0 }); Happy tweening!
    3 points
  3. hey @Jiri, Thanks for the reduce case. In addition to the perfect recommendations of @PointC here is the hint that you can excellently animate a clipPath using GreenSock. Together with a matchMediaList it could look like this: https://codepen.io/mikeK/pen/NQWdEP Happy tweening ... Mikel
    3 points
  4. Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom. Does that help?
    2 points
  5. Hey LeoZ, Maybe this thread can help you get a little further:
    2 points
  6. I would just recommend using yPercent instead of y because if the line wraps then you will see some of the lines. https://codepen.io/GreenSock/pen/GVrbJx
    2 points
  7. Off the top of my head I'd say loop through and get the distance from the top for each element by using getBoundingClientRect(). Based on that position you can add the matching ones to an array or possibly give them a class. By doing it that way, you would only need one trigger with an offset based on any given row's distance from the top. Hopefully that makes sense. Sorry, I don't really know of any examples to show you.
    2 points
  8. The stagger works just fine. Your original post said you wanted three images per row. Now you want between 1-3 images per row depending on screen size. The problem in your original pen is your each() loop targeted the .item overlay. You then tried to stagger the target, but each target was only 1 element. It's hard to stagger one item. If you're trying for a flex layout with varying numbers of images in each row, then no, you probably wouldn't want to wrap those in a parent div. The problem with what you're doing is you don't know how many elements will be in each row until you know the screen size. If you want each row to trigger a stagger of its children, you need to figure out how many elements are in each row and group them so they have some kind of relationship. You could probably put them into an array and create a tween and trigger for each array of targets.
    2 points
  9. Hey @refael_b, That is the point ... as @PointC said very correctly. Here with 2 in a row: https://codepen.io/mikeK/pen/EqZEzb Happy tweening ... Mikel
    2 points
  10. That's behaving exactly as expected. You're targeting each item. If you want three images per row and a stagger reveal of those images, you need to redo your html a bit. Place three items per row and then target the rows in your each() loop instead of each item. Make sense? Happy tweening.
    2 points
  11. Good call. That demo I posted was a fork of a user's question in a different thread so I wasn't paying much attention. Though I'd probably revert() and re-split on resize because it looks a bit odd to have two lines moving at once. Just my two cents. YMMV.
    1 point
  12. If you want to re-split the text when the browser size changes, see this thread:
    1 point
  13. well that was profoundly simple, many thanks @PointC!
    1 point
  14. Can you describe what you mean by "native events"? Like "touchstart"? If so, yes, it's tapping into normal browser events - it's not using some 3rd party library. There are zero dependencies outside of GreenSock tools. If by "native events" you're talking about native development on phones or something like that, no, this is pure JS that runs in a browser and is tapping into browser events. I'm not aware of any examples or helpers for tests, no, sorry.
    1 point
  15. Hey @refael_b, If "triggerHook: 'onEnter' " both rows are directly triggered. If e.g. "triggerHook: 0.5 " only the first. Try it ... Mikel
    1 point
  16. Hi @Jiri, I see your post has a lot of views but no answers yet. That's probably because you have so much going on in the demo. Simplified demos make it much easier to troubleshoot. Getting into media queries and responsive layouts is a bit beyond the support we offer around here. We do try to keep the focus on GSAP support. That being said, I think this thread can help. You'll see that thread has a lot of good info and links to other responsive threads. I'd pay particular attention to @OSUblake's demo in that thread with the blue and red squares. It's a nice and simple example to get you started. It's always best to start small and build up. Hopefully that points you in the right direction. Happy tweening.
    1 point
  17. hey @Shakespeare, I agree with @PointC: it is not easy to understand what you are up to. If you want to combine and play different animation sections, the recommendation of @PointC .play ('label') is a great option. The splitText tween would run - here an extract. https://codepen.io/mikeK/pen/eqBxJo Happy tweening ... Mikel
    1 point
  18. Yeah, I'd say overflow:hidden should take care of that for you. Just FYI: rather than a delay on all those loose tweens, I'd recommend looking at a timeline. That will allow you to sequence everything together. https://greensock.com/docs/TimelineMax Happy tweening.
    1 point
  19. Hey @Trip Presumably 'overflow: hidden;' a solution: TweenLite.set('.car_back',{overflow:'hidden'}); Happy tweening ... Mikel
    1 point
  20. Hi @Nexal I've seen that nobody has yet responded to your question here and I'd like to help. But, first, I have to comment on the fact that you have nearly 200 lines of code for an animation that it looks like should be two tweens, more or less. You're also calling some Swup() method that does not exist and attempting to load several scripts from other locations that are failing. If you could remove the uncessary code from your example, it will make it a lot easier for us to help you and for you to identify what could be causing your issue.
    1 point
×