[Cannot read properties of undefined (reading 'DOM')]

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? 

See the Pen NWybXmy by tw_parodia (@tw_parodia) on CodePen

[reverse scrolling grid element with gsap]

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.

[reverse scrolling grid element with gsap]

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);

 

[reverse scrolling grid element with gsap]

8 hours ago, OSUblake said:

Create a timeline that animates all the columns at the same, and then hook it up to ScrollTrigger.

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])});
})

 

[reverse scrolling grid element with gsap]

4 hours ago, OSUblake said:

Hi Paro,

 

Have you checked out ScrollTrigger? 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

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.

[reverse scrolling grid element with gsap]

What i am trying to achieve is;

See the Pen jOGGKRq by bramus (@bramus) on CodePen

 

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.

See the Pen MWQegGJ by tw_parodia (@tw_parodia) on CodePen

[text box animation must be always center in screen size]

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]),

 

[text box animation must be always center in screen size]

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.

See the Pen GRQJGvZ by tw_parodia (@tw_parodia) on CodePen

[TweenMax two element same time but different value?]

@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.
 

See the Pen GRQJGvZ by tw_parodia (@tw_parodia) on CodePen

[TweenMax two element same time but different value?]

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