Jump to content
Search Community

mrpsk

Members
  • Posts

    7
  • Joined

  • Last visited

Everything posted by mrpsk

  1. @elegantseagulls @Carl I really appreciate your help! I solved it by following Carl advice (totally my mistake when I thought about an onReverse function) and I used onReverseComplete in each container, so now the text changes when the last animation is done and my code is finally complete I updated the code on CodePen, if you want to check how I solved. Thanks guys!
  2. Hi everyone! I'm almost at the goal of my code, basically it works as a timeline guided by the ScrollTrigger plugin. To finish it, I just need to make reverse functions for each animation. But when I try to call the OnReverse method, it simply don't work. I already read the documentation (specially the part in ToggleActions and timeline callbacks) and I used a lot of OnStart() methods. But I can't figure out why the OnReverse method is not getting called when I make a EnterBack action. I tried to call the onReverse in the animation and in the timeline, and doesn't work in both. I attempted to use onEnterback() too. Is that something that I'm doing bad? Can someone give a hint? Thanks in advance
  3. Hi @Cassie Thats a really nice strategy, I will keep in mind while working with gsap. I will use this rework and add some new features to achieve what I want, but your reply helped a LOT. Thanks for your help
  4. Hi @akapowl I see, that is a lot of beginners mistakes that i'm making. I'm reworking on my code right now, thanks for the input!
  5. Hi everyone! I'm trying do to a timeline (not the GSAP feature, but a real event timeline) and I'm basically keeping one element fixed (the "20" from the year "2010") and by scrolling I want to change the side text (in the left), the background image and the current year by using scrub. As you can see in my CodePen, the first slide transition is nice, but I guess it's because the first two sections contains the same background image. So when i change from section 2 to section 3 it goes very weird and don't transition nice. I notice a curious thing too: when I set the "pin:true", the fixed element is dropped to background, so I can't use this prop. All I want is the transition to go smoother like in the first one. Does anyone have any solution for this? I appreciate all the input that you can give! PS: I'm doing something like this (https://15years.melonfashion.ru/en/) you can see a similar timeline in the 4th section of this website. Thanks in advance
  6. Hi Cassie! Thank you so much for your input, indeed it was pretty complex for my use case. But now I studied about the codepen you made and the concepts are more clear to me, now I can make some adjustments and learn more about this awesome lib. Have a nice day!
  7. Hi there! I took this codepen from the Examples: CodePen Home Infinite Scrolling Cards with GSAP and ScrollTrigger (continuous snap) (https://codepen.io/GreenSock/pen/LYRwgPo?editors=0010) and I'm trying to adapt it to show some images to make an "About Us" section with all team members. So right now I wrote my progress at this codepen -> https://codepen.io/mrpsk/pen/yLzRroG I'm having some trouble in those topics below: - In the start, I don't want to show the previous members (since I disabled the infinite scrolling mode), so I'm trying to make it start with the left side of the screen in blank (so the text can be properly displayed too). - I want to end the scrolltrigger when the list of members end. Right now I'm having a loop issue that continues after the last member of my list. - I want to change the spacement between the cards to put them side by side (and don't fade away), any tips? Someone can help me to find out where I can made some changes in my JS file? Thanks in advance!
×
×
  • Create New...