[react infinte scroll slot machine MUCH DATA examples]

hello
i want to create a slot machine on REACT. image i have a 10000 elements, 1000 rows by 10 elements in a row, so its not possible to render them at once(even get that data at once). so i want to render at least 10 rows and do a pagination on scroll and add some rows to the bottom and remove from the top when scroll bottom and vice versa when scroll top. do you think its possible? do you have any examples guys? just wanna test the performance. wanna look how it looks like

[fixed scroll trigger add and remove class]

Visual-Q

nope thats not what i want
still searching for an answer. i havent found anything similiar even in pure JS. tried a few scripts but...
so my logic is
1. track mouse scroll up/down (even it reaches the top or bottom of document)
2. make an array from bgr
3. make [0] array item active (add class)
4. if scrollup add active class to [4]item and remove from [0]
5.if scrollup add active class to [1]item and remove from [0]

[fixed scroll trigger add and remove class]

24 minutes ago, Visual-Q said:

Are you asking about the syntax for animating clip:rect note I believe that has been depreacted in favour of clip-path:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

However this is the syntax still seems to work: Updated to loop through array

 

 

 

yes this is it. foreach for array
now i need to make it draggable and scrollable up and down.
it is clip not clip-path 
this is the trick. clip-path clipping everything behind while clip is not

[fixed scroll trigger add and remove class]

i watched these examples before and i think thats not what i want
because the trick is manipulating the slides with only   clip: "rect(0,100vw,100vh,0)"

the slides are stand still. they are not moving. the trick is  

clip: "rect(0,100vw,100vh,0)" <=scroll=>  clip: "rect(0,0vw,100vh,0)"

i havent seen something like this in examples

[fixed scroll trigger add and remove class]

Hello!
im trying to create a slider like here
https://mst.agency/
i made it with pure CSS but that was not i expected. i cant manipulate it and its glitching sometimes
so now i need js to make it 100% like that
the trick is add/remove clip: "rect(0,100vw,100vh,0)" to the slides every 10 seconds

and you shouldnt use z-index
for now i only understand how to animate elements alone and in a timelines and this is a real challenge for me

can you give me an advice what i should use to achieve that?

please dont solve it for me. just give an advice what i should read and maybe some examples. i want to solve it by myself.
my logic is:
1.bgrs to array
2.make [0] active(add class or style)
3.make a script on scroll up and down to add and remove style

4.make it autoslide every 10 seconds
can it be done with gsap?

See the Pen rNWZxaQ by aptypkaa (@aptypkaa) on CodePen

[Slider issue with xpercent]

30 minutes ago, GreenSock said:

Again, you'd never run into issues if you just directly set the values via GSAP because then it never has to get re-parsed from the browser and decompose the matrix()/matrix3d(). Better performance, better accuracy. 

i cant set it with gsap because the block will be at the center for a millisecond after load. thats why i need it to be set via css.

for now i set the translate(x:-100%) via css and animate it with gsap(x:100%) looks fine. works

[Slider issue with xpercent]

2 minutes ago, akapowl said:

 

 

If you remove the transform in your CSS, you'll see, that it works quite well, too.

 

 

See the Pen

See the Pen b0a1253517023b4e886db7bf98fc69cb by akapowl (@akapowl) on CodePen

by akapowl (@akapowl) on CodePen

 

 

i didnt say it doesnt work.
i said i cant use it because of starting position. if you look closer the starting position is in the center and only then it moves from left to right.

nvm i use "X" for that animation. looks like it works

[Slider issue with xpercent]

44 minutes ago, PointC said:

Maybe I'm misunderstanding the question, but couldn't you use this?

gsap.fromTo( ".slide", {xPercent:-100}, {xPercent:100} );

 

fromto ... xpercent not working

 

41 minutes ago, akapowl said:

 

Or alternatively to what @PointC suggested, using x: "100%" instead of your xPercent seems to also work.

 

 

oh... x seems working... i thought i must use xpercent for translating in %

[Slider issue with xpercent]

hello guys
i want the red block move from left to right. with css i can do it perfectly from -100% to 100% and it will looks great even if i change the content inside
but with GSAP i cannot do this perfectly because of starting position. i cant use gsap.set or gsap.fromTo because i will see the block at start in center.

but if write the starting position (-100%) at css and move it with gsap, the gsap will think that it is 0% not -100% and when i change the content inside the whole construction looks broken....
how can fix that? should i just do this with css toggling?

See the Pen WNojyZv by aptypkaa (@aptypkaa) on CodePen

[is it possible to hit a hover effect with gsap?]

hello
i dont have a demo, its just a question. i tried to search the docs but didnt find anything. so the question is: is it possible to toggle a hover effect once with gsap? or a single css animation with @keyframes for example?

[Rotation doesnt work before translate]

i want to make animation that will move the block along the red line.
but because of broken order its not working

[Rotation doesnt work before translate]

i dont need 2 different translations. i need to change the order of the translatons. when the page rendered in the dev tools i see 

<div class="portfolio1" style="transform: translate(-100px, 15px) rotate(-5deg) scale(1.00001, 1.00001);">
          </div>

the animations looks broken because of translating then rotating. i want to swap them. gsap.set is not working

[Rotation doesnt work before translate]

it is still translate then rotate

[Rotation doesnt work before translate]

See the Pen MWbWZaW by aptypkaa (@aptypkaa) on CodePen

[Rotation doesnt work before translate]

Hello!  i have a code like this 

tl_portfolio1.to(".portfolio1", {rotate:-5, x:-570, y:105, duration:0.1})
  .to(".portfolio2",{rotate:-5, x:570, y:105, duration:0.1},"<");

but when it renders it looks like this transform: translate(570px, 105px) rotate(-5deg) scale(1.00001);

so the rotation applies after translate. i want it work firstly. why it doesnt work?

[multiple callbacks]

const s2_enter = gsap.timeline({paused:true, defaults: {opacity: 0,ease: "expo.inOut"}})

.from(".s2-block-left",{xPercent:-100,duration: 1})

.from(".s2-block-right",{xPercent:100,duration: 1},"<")

.from(".section2-text2",{x: -500,duration: 1})

.from(".section2-heading",{x:-300,duration: 1},"<")

.from(".s2-img1",{x:1000,duration: 0.5},"<")

.from(".s2-img2",{x:1000,duration: 0.5},"<")

.from(".s2-triangle",{duration:0.5,},"<");

 

const s2_exit = gsap.timeline({paused:true, defaults: {opacity: 1}})

.to(".s2",{opacity: 0});

 

const s2_timeline = gsap.timeline({ scrollTrigger: {

    trigger: ".s2",

    scrub: 1.5,

    start: "top top",

    end: "bottom top",

    pin: true,

    toggleActions: "play reverse play reverse",

    onEnter: () => s2_enter.play(),

    onLeaveBack: () => s2_exit.play(),

}

});

 

Hello. how can i play multiple animations on callback?
1. i want to play onEnter only entering animation s2_enter

2. onLeaveBack i want to play fade out animation s2_exit

3. now because the s2_exit animation made .s2 block invisible(opacity 0 )
i want to play 2 different animations s2_enter and s2_exit-reverse

what is the best way to do this?

[free space between pinned sections]

i will try to play with margins to achieve the effect i wanted

[free space between pinned sections]

as you can see i have too much free space between two pinned sections

how can i decrease this space?

 

or its not the "pin" problem and i should play with height and width of the section?

See the Pen ExgYEge?editors=1010 by aptypkaa (@aptypkaa) on CodePen

[preload time and pause scrolling onleave action]

works but looks very bad. definitely not the solution

[preload time and pause scrolling onleave action]

here is the minimal demo

See the Pen ExgYEge?editors=1010 by aptypkaa (@aptypkaa) on CodePen

[preload time and pause scrolling onleave action]

hello
i have 2 questions
1. this landing is about 3.5mb weight which is not too much. why sometimes when i open it i have to wait about 1-2 seconds to "load" it? looks like it loading the gsap script, its weight about 60kb so why its lagging???
2. as u can see i have onLeave and onEnterback callbacks for the sections(example 1 and 2 sections) 
if you look closer the scrolling continues  while onleave animations is still in progress.

i want to make reveal and hide animations looks smoother while scrolling, it should look like this:
-scrolling to the end of the section1, onleave callback stars, scrolling paused

-onleave callback section1 in progress, scrolling paused

-onleave callback section1 end, continue scrolling

-onenter callback section2 starts, scrolling paused

-onenter callback section2 in progress, scrolling paused

-onenter callback section2 end, scrolling continue

something like this
can you help me please?

See the Pen ExgYEge?editors=0100 by aptypkaa (@aptypkaa) on CodePen

[is that possible to create a website like this with gsap?]

1 hour ago, ZachSaucier said:

The site uses clip paths or masks to do the letters. Looks like they're using Canvas to do so.

 

In a mousemove listener, move the image and the mask a bit.

 

I assume you mean the sections from left to right (between RONIN showing different projects). Again, it's just animating the images and masks.

u can slide left or right to switch letters.  and you can slide down to see the project... i mean transitions in the project when u slide down

[is that possible to create a website like this with gsap?]

im interested in how to:
1. after preloader the scene zooms to "R" letter
2. first scene with R letter, the background moves onmousemove

3. transitions from 1 to 2 to 3 to 4

 

is that possible to create a whole website like this saving all the smooth transitions between the scenes ...

[is that possible to create a website like this with gsap?]

https://www.roninamsterdam.com/

 

i mean the whole site with gsap? sections change and transitions? if yes how would you do it?

[Overlapping/timeline changes the div height]

@akapowl

i'm trying to understand how to manipulate with dimenshions of pinned item and its triggers position