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

I am trying to create a Full Page Infinite autoplay with thumbnails and thumbnails animation using GSAP, but since i am not that handy with gsap it looks like kind of hard a little help on fixing the things that are breaking will be very helpful and thankful. this is the referenced site: https://www.twopointo.film/ according to which i am trying to build this example have a nice day!

yes thanks for the help !

Sorry for the delay was making the another prismic repo for the demo here's the DemoLink Thanks for the help ?

I've been working on a Vite Prismic project where I was trying to make a in page elements animation from one page to another I am getting this error when i try to get spans of title element of about page the spans that i am trying to animate code import GSAP from 'gsap'; import Page from '../classes/Page'; import { split } from '../utils/text'; export default class AboutPage extends Page { constructor() { super({ element: '.about', elements: { title: '.about__title', description: '.about__description', content: '.about__content', }, }); } beforeShow() { super.beforeShow(); this.elements.titleSpans = split({ element: this.elements.title, expression: '<br>', }); } show() { this.timelineIn = GSAP.timeline(); this.timelineIn.fromTo( this.element, { autoAlpha: 0, }, { autoAlpha: 1, duration: 0.4, } ); this.timelineIn.fromTo( this.elements.titleSpans, { autoAlpha: 0, opacity: 0, y: '-50%', skewY: '-10deg', }, { opacity: 1, autoAlpha: 1, duration: 0.4, y: '0%', skewY: '0deg', stagger: { amount: 0.1, }, } ); return super.show(this.timelineIn); } hide() { this.timelineOut = GSAP.timeline(); this.timelineOut.to(this.element, { autoAlpha: 0, duration: 0.4, }); return super.hide(this.timelineOut); } } beforeShow() function is making spans in that title. it is complaining about this.elements.titleSpans

HI, I want to know how we can able to stretch and smear a svg object using gsap? like what i have to do in steps to achieve that kind of process? the things I wanted to animate is related to stretching and smearing typography animation content.

There's a typo I not add Y after scale here { duration: 1.5, ease: 'expo.out', scaleY: 0, transformOrigin: '100% 100%', }, so by adding that fix the problem

I've been trying to make my preloader move from middle not from bottom right corner and i not able to provide the codepen coz its a pretty huge project and preloade is been working from backend here's a code and video this.elements.titleSpans are the text in 3 lines this.elements.numberText is the number at the bottom of the page this.element is the preloader itself https://imgur.com/a/7GiM5HL

Hi sir i tried to adapt that working and i did it now the problem is with the position and also with the timing https://codepen.io/raj-shukla/pen/GRmQBVz?editors=0010

It's in jquery so its hard for me to understand how to make it float right coz am a nerd who is new in gsap.

Sorry for pinging ? by adding ```js mobile: { smooth:true; } ``` fixes the issue