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 11/22/2020 in all areas

  1. Yup, I tend to overcomplicate things 😅 @mikel's suggestion is definitely way easier than mine. https://codepen.io/akapowl/pen/vYKqwxM
    2 points
  2. Hey, Or you can define a suitable trigger for the end activity endTrigger: '.right-wrap', end: "bottom 100%", cheers ... Mikel
    2 points
  3. Hey @Olga__Kondr The way you have it set up with your end being +=100% means, it will be pinned for 100% of the height of your .left-wrap__description, which in this case would be around the 100vh you have set as height for that element. To get it working as you'd like, you would have to get the height of your right-wrap for the end and substract the height of your left-wrap (plus any margins applied to the right-wrap). See this example: https://codepen.io/akapowl/pen/KKMjYYV I changed the CSS for your .left-wrap__descr
    2 points
  4. Hey @SimplSam, Maybe I am not interpreting your setup and your ideas correctly. But why don't you use 'normal transforms'? https://codepen.io/mikeK/pen/5db6e0c6571ee7f554c6dd8876c77d59?editors=1010 Happy tweening ... Mikel
    2 points
  5. Hey @Farouq - welcome to the forums. You could either set it up via applying scroller: '.world' to each of your ScrollTriggers, or to all of them beforehand via .defaults like so ScrollTrigger.defaults({ scroller: '.world', }); https://codepen.io/akapowl/pen/oNLrVQz This is from the ScrollTrigger-Docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scr
    2 points
  6. Hey, i just built a new burger menu and would like to get some feedback, what do you think about. Sure, there a dozens of em out there but i wanted to build one on my own - also to get more familar with gsap Maybe you see some really bad DON'Ts so please tell me then actually i would have to update the vh and vw in the timeline on window resize Thank you
    1 point
  7. Heye @smenegassi Now I can understand your intention. But I'm not an expert like @OSUblake to give you a hint how the birds can be combined with these sinus trajectories. Keyword birds: here are some gulls based on a concept by Blake also. https://codepen.io/mikeK/pen/MNbLOd Happy flying ... Mikel
    1 point
  8. Hey @smenegassi, Why don't you use a specific path that represents a sine curve. Of course you can calculate such a curve, but ... https://codepen.io/mikeK/pen/f02ae50bcec8b5da3588d59032887d1f?editors=1010 Happy curving ... Mikel
    1 point
  9. Hi @momciloo, I think, perhaps, you would be better off with a timeline in this case rather than competing tweens. https://codepen.io/sgorneau/pen/abZgrRR?editors=1010
    1 point
  10. The error is telling you what's wrong You're attempting to append the string '.titles' to a DOM element which causes it to use the .toString() method. That's not a valid selector so the error is thrown. What you probably want to do instead is thumbs[i+1].querySelectorAll('.titles') or something like that as the article that I linked you to covers. I encourage you to spend more time going over the demos in the article and playing around with them so that you make sure that you're understanding how they work. Additionally your target of ['.thumb.five .titles', '.thumb.five .credits
    1 point
  11. ... just another concept to pin and change elements https://codepen.io/mikeK/pen/3991238d734744756c3c38947a5428f1?editors=1010 Happy scrolling Mikel
    1 point
  12. Hey @pOri_A, You could try an onUpdate like this https://codepen.io/mikeK/pen/0657089a2341ebf60f702661cbf082d3?editors=0010 Happy speeding ... Mikel
    1 point
  13. Hi, I am on my mobile so can't really write much code but I belive you just need an array of refs for this to work. Currently you are only animating the last item because that what the anim.current is. Checkout this example on how to create an array or refs in React and use them with ScrollTrigger. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/#5-how-to-create-an-array-of-refs Let me know if that helped.
    1 point
  14. A little Draggable and ThrowProps can handle most of that slider effect for you. It's similar to one I built a few months ago. Maybe it'll help you get started. Happy tweening.
    1 point
×