artstyle

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

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]

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

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

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?

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

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

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

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?

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?

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

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

it is still translate then rotate

https://codepen.io/aptypkaa/pen/MWbWZaW

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?