[Ideas for make like this slider]

i mean this thankyou

 

[Ideas for make like this slider]

Hello folk 

i am trying to do like this slider and i make the base html, but i need your help of how i can make this animation , like first revele animation and those scroll, if there is any example that will be great, 

https://grege-interieurs.com/

 

[I try to make full circular slider]

Any help plz 😪

[I try to make full circular slider]

3 hours ago, elegantseagulls said:

I think this page will be useful, particularly the demo that shows rotation and snap to angles:

Thank's for replay 

some thing like 

but i think i lost the main concept about click on one circle  

[I try to make full circular slider]

Hello , i am sorry to make full slider circular , i found a good example on this amazing forum ,  but i don't have too much experience to make it alone and i need to under stand it , so i need some one to help me 

all i want 

the same code pen 

but i want to rotate circle with drag mouse and the circle have a infint rotate 

then if i have a buttons like pre and next but for category , like if i press a fruit button the number change to fruit 

i know that is bad but i need some help thank you  

See the Pen abEyVOV by MayyarMag (@MayyarMag) on CodePen

[Orbit objects around central object...]

12 hours ago, OSUblake said:

like what happens when the circle gets here?

Hey, 

really thank you for help !! 

Yah you are right , i want to make a full circle I will keep the radius hidden and copy the information of the first and second radius so that I get something similar infinit slider , hope i could explain ??

[Orbit objects around central object...]

1 hour ago, OSUblake said:

If you need help, please create a minimal demo showing what you are trying to do. Thanks!

 

Yes sure, actually i am new with this kind of svg animation so i start with this post as a reference and try to get like an image i added befor :,

but the main issue is change with svg manually,  

See the Pen yLPaEQX by MayyarMag (@MayyarMag) on CodePen

then if i need a simple circle , i should to rotate every circle +90 deg ?? with transform origin ?

[Orbit objects around central object...]

On 3/29/2021 at 4:15 PM, mikel said:

Its still the old GSAP syntax but a funny hint how to rotate 'planets'.

 

Hello Mr, did you draw this manually , cuz i try to edit on this to get somethig like 10 small circles around orbit , but it too hard manually ! , then when i remove transform from origin all things miss up , cuz if i use just a circle , i don't need it right ??

what i want to achive 

THnks

[Scroll trigger with react three fiber]

18 hours ago, OSUblake said:

You just need to make your ScrollTrigger inside an effect.

 

thank you , why when i open it in full screen it's not working ?? https://codesandbox.io/s/baked-ao-forked-0smj4?file=/src/App.js

 

[Scroll trigger with react three fiber]

1 hour ago, Cassie said:

please can you pop together a minimal demo - it's very hard to debug without context.

Hey , i am not sure if i can share a sandbox , 

this is a minimal , i want to move camera while scrolling https://codesandbox.io/s/polished-cdn-2o25x?file=/src/index.tsx

 

[Scroll trigger with react three fiber]

1 hour ago, Cassie said:

Have you seen our React guides? 

Hi , thank you for replying cuz i am struggle, i try ```

useEffect(() => {

    gsap.to(boxRef.current.position, {

      x: "+=10",

      duration: 6,

      scrollTrigger: {

        trigger: boxRef.current.position,

        scrub: true,

        start: "top bottom",

        end: "top top"

      }

    });

  });

```

but it not work

[Scroll trigger with react three fiber]

Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? 

or i have to learn some thing befor ?? i saw an example but never see what i need to do 

thank's 

[laptop animation with scroll trigger]

4 minutes ago, OSUblake said:

It doesn't look like you added any scroll trigger code.

 

sorry i update it now 

[laptop animation with scroll trigger]

5 hours ago, OSUblake said:

I just changed his transform origin.

thank you for answer Mr, but it not work with scroll trigger 

See the Pen qBjdwew by LoliaTrafam (@LoliaTrafam) on CodePen

[laptop animation with scroll trigger]

16 hours ago, OSUblake said:

Can you make a minimal demo?

 

Hey , yes sure 

See the Pen MWowqvo by LoliaTrafam (@LoliaTrafam) on CodePen

i want to flip a red one to look like screen laptop closed and open

[laptop animation with scroll trigger]

On 8/23/2021 at 10:10 PM, OSUblake said:

Well, that's how Apple does it, but if you're doing a simple laptop, you might able to just animate the lid's rotationX property.

When i add RotateX , not rotate just streched  

```

    gsap.to(".screen", { transform: "rotateX(90deg) ", ease: "ease:Circ.easeOut" });

```

[laptop animation with scroll trigger]

18 minutes ago, OSUblake said:

lid's rotationX property.

Yes exactly , but sorry , where can i find the fragmented laptop !

[laptop animation with scroll trigger]

3 hours ago, OSUblake said:

Welcome to the forums @mayyar

 

You need to do animate between a sequence of images, like shown in this thread.

 

 

thank you for replay , i have to get an sequence images of laptop in different Position and animate between them ? 

[laptop animation with scroll trigger]

Hello , i hope some one can help me , how i can do like this effect in gsap , not latterly same , but i want to open laptop win scroll , is there a way with gsap ?

thank you in advance 

reference :https://www.apple.com/macbook-pro-13/

 

https://postimg.cc/ftRJTW5M