paro

Hi there, Cannot read properties of undefined (reading 'DOM') I got this error while working on my project, i couldn't find a solution for that. What i am missing here?

Thank you so much @Cassie @OSUblake This solved my current issue but how about adding more smooth effect for scrolling? Because it does really fast. Maybe implementing "smooth-scrollbar" which i'll try that.

I've been working on it for hours but I couldn't come with a solution. I am really tired, maybe move without it is the easy option for me 😴 I updated css/html code and implemented scrollTrigger plugin, gsap.registerPlugin(ScrollTrigger); const rev_left = document.querySelector(".column-reverse-left"); const rev_right = document.querySelector(".column-reverse-right"); const center = document.querySelector(".column-section"); let tl = gsap.timeline({scrollTrigger:{trigger:".column-section",start:"top top",end:"bottom bottom",scrub: true,markers: true}}); tl.to([rev_left], { duration: 1, yPercent: 200, }, 0); tl.to([rev_right], { duration: 1, yPercent: 200, }, 0);

i don't really understand how can i do that, can you give an example? I did try something but don't know how concept should be, var offset = 0; let tl = gsap.timeline({duration:1, scrollTrigger: {trigger: "main"}}); window.addEventListener('scroll', function(e) { offset = window.pageYOffset; tl.to([rev_left,center,rev_right], {y: gsap.utils.wrap([offset,-(offset),offset])}); })

I am not exactly sure how can i implement ScrollTrigger for this kind stuff. But anyway, a bit hacky way i am very close to solve it. Can you check updated version? i've problem with center column. i couldn't implement gsap to it.

What i am trying to achieve is; https://codepen.io/bramus/pen/jOGGKRq Is it possible with only using GSAP? Maybe there is have demo but i couldn't find yet 🤔 My demo looks terrible but I would be very happy if someone could help.

Thank you again @PointC. I learned new thinks again, that "yPercent" looks super cool. This line solved my issue; yPercent: gsap.utils.wrap([-150, 150]),

I ran into a new problem while working on my previous topic. I want the two boxes moving from top to bottom and bottom to top to always move vertically towards the exact center even if the screen size changes. Some calculations are needed here, but I couldn't find which variable I can use to calculate it. I mean, even if the screen height changes, the moving objects will be above and below the middle text.

@mvaneijgen @PointC Thank you for your helps, i've update GSAP syntax. This is how i've changed the code and it works for me. https://codepen.io/tw_parodia/pen/GRQJGvZ

Hello there, I am trying to achieve animate two element in same time but i want to give them different value for each. The first element will move from the top to the center and the second element will move from the bottom to the center. var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 }); tl.to([up,down], 1, {y: (winsize.height/3)}); // i need negative value here for down element