Jump to content
Search Community

OxyNinja

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by OxyNinja

  1. @GreenSock Hi Jack, Thanks for pointing out other things. The code is generated one, not custom written, so that's the reason for those additional attributes, and I've didn't clean them up before posting. I've also quickly added duration, to prevent any confusion (still made a mistake :D) as we use gsap.defaults({duration: 1}); The reason for nesting is, that we created an animation builder that works on top of the GSAP. We created our custom timeline that controls and generates different tweens and merges them into a single timeline. In the case of scroll trigger, I need to controll/group them all, so I could kill/clear them all at once, but without affecting other tweens/timelines/selectors. Also, everything is synced together, so it moves the playhead by playing animation, or play/seek animation upon dragging the playhead Would it work if a timeline is stopped at the beginning, so only a scroll trigger would control tweens? If not, I guess I will target them via getTweensOf() or killTweensOf(). I've tests multiple different variations of the code and this only happens on scroll trigger without scrub, if scrub is defined, everything seems to work properly, so this was slightly confusing to me. P.S. As this is my first post, I would like to thank you and all contributors for this amazing product!
  2. Hello everybody, I came across an issue, where inserting tweens or timeline in the master timeline results in totally wrong animation on some elements. As you can see in the video attachments, buttons are animated properly, but the text just changes state from -300 to 0 without any animation. I've tried multiple variation of the code below, and it only works when I assign animation to gsap, not to timeline. Is this some sort of bug, or I've just overlooked something? Thanks a lot! P.S. The code below is simplified as there should be different values for each selectorsArray, so that's why I am wrapping it up with first for..of instead of using gsap.utils.toArray(selectorsArray) directly. // V1 window.addEventListener("load", (e) => { const selectorsArray = [".ct-text-block", ".c-btn-main"]; const masterTimeline = gsap.timeline(); const x = (item) => { return { trigger: item, endTrigger: item, start: "top+=0% 85%", end: "bottom+=0% 15%", }; }; for (const s of selectorsArray) { for (const item of gsap.utils.toArray(s)) { masterTimeline.from(item, { x: -300, duration: 1, scrollTrigger: x(item) }, 0); } } }); // V2 window.addEventListener("load", (e) => { const selectorsArray = [".ct-text-block", ".c-btn-main"]; const masterTimeline = gsap.timeline(); const x = (item) => { return { trigger: item, endTrigger: item, start: "top+=0% 85%", end: "bottom+=0% 15%", }; }; for (const s of selectorsArray) { for (const item of gsap.utils.toArray(s)) { const timeline = gsap.timeline({ scrollTrigger: x(item) }); timeline.fromTo(item, { x: -300, duration: 1 }, { x: 0 }, 0); masterTimeline.add(timeline); } } }); gsap.mov
×
×
  • Create New...