whizzbbig

I am using this article by @jhey to get started with the animation, and I think there's something wrong with the math the example you shared is better and easy to accomplish and i really liked it ? but at the end of the day the purpose is to learn and explore how beyond we can get with the CSS 3D Transforms..

I went on to create this mockup animation, and I was able to complete half of it. But I got stuck when I tried to achieve smooth rotation on mouse movement from the X and Y direction. I thought using .maprange would be a good idea to map the input range of -100 to 100 (which corresponds to the full range of the X and Y values) to the output range of -30 to 30. However, the result didn't turn out as I hoped . Can you help me like where I went wrong? Also, could you enlighten me on how I can make the div rotate on click and infinitely, like it is being rotated using CSS custom properties? I'm really feeling very embarrassed about not being that good in math. Website Link: https://linktr.ee/ http://https://imgur.com/30OnrJN

@GreenSock @mvaneijgen Hey I've fixed it finally everything is working fine as i needed thanks for all the support i got from here ? https://codepen.io/raj-shukla/pen/BaVmyjx?editors=0010

@mvaneijgen this seems to fix our problem if we do those steps but it not make the cycle loops i mean we seem to see the solution here but we just need to know like which conditions applies to the thumbnails and adding this step specifically for the previous might resolve the problem i guess what you think?

okay so after asking on communities and with lot of trial and error it works with `itemsMax = items.length` idk why you subtracted one from it

Yeahh even i also have no idea what make it behaves like that but i am trying to find the solution of it can you help us @GreenSock with that?

Thanks for that also i found a sort of bug do you know how we can resolve this like it is also in the codepen you provided too https://codepen.io/mvaneijgen/pen/GREebPK when we goto the last slide and move to slide 4 and then move to rest of the slides in sequence you'll see that it stuck on slide 4 only it not slide to slide to 3, 2 or 1 we go in sequence Error Video

How could i make them slide when the video is ended is there any possible way to update the value of `timer` i could think of the way where we can add `onended` prop in video element and when it ends that triggers the function to slide but idk which one i query

import gsap from 'gsap' import Draggable from 'gsap/Draggable' yeah i am importing them above and also tried logging it to the console but not sure what makes it behaves like that EDIT: yoo idk how but by removing the import and adding that line back fix the bug ?

Yay today i able to fixed the problem that i was having with the videos and able to achieve the goals that i set for this project thanks to you that helped with the resource and also idk why it isn't dragging tho like there is no error in the console it isn't reproducible nor i developed in codepen seems like this part of the code isn't working // --------------------------------// // ☝️ Touch // --------------------------------// if (window.Draggable) { Draggable.create(items, { type: 'x', // Drag only on the X axis zIndexBoost: false, onDragStart: function () { window.clearTimeout(autoplay) // disable autoplay slideLogic(this.getDirection() === 'right') } }) } // END ☝️ Touch --------------// what would be the case ?

Sorry, @GreenSock if I failed to explain clearly what I am trying to achieve here but isn't those slides are moving to next slide based on the video duration because I know that I already resolved that issue. It all depends on that timer variable if the value small it will move faster the only thing which I need to fix is freezing of the video and make them start from the 0 when they are in window that's all I am trying to achieve here

@GreenSock any idea what i can do here to resolve this problem?

The only problem i am having is that video is freezing after the 1st video maybe it is because they also played at the same time goals to achieve here : - slide video has to play when they are in screen - and how we can able to make them play from the start if we move from one slide to other slide by using dots or thumbnails

So I Tried and able to made it to the position where the video is working with the thumbnails all thanks to @mvaneijgen you for providing this pen the only thing i am facing right now is that the video get freeze and right now i'll try to make it slide to another video slide based on the video duration https://codepen.io/raj-shukla/pen/rNKjKzN?editors=1000

Thanks this would be it now i can able to implement the slider if there is something related to logic i will ask here