whizzbbig

13 hours ago, Ali Manuel said:

Hello @whizzbbig , There might be better ways to accomplish this animation , such as

 

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

See the Pen BaORxjq?editors=0010 by raj-shukla (@raj-shukla) on CodePen

@GreenSock @mvaneijgen Hey I've fixed it finally everything is working fine as i needed thanks for all the support i got from here 🙏 

See the Pen BaVmyjx?editors=0010 by raj-shukla (@raj-shukla) on CodePen

2 hours ago, whizzbbig said:

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

@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?

2 hours ago, mvaneijgen said:

I see, I've no idea what could cause that and I don't have time to debug this at the moment. If you find anything I would love to know. 

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

55 minutes ago, whizzbbig said:

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

 

 

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

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?

On 11/14/2022 at 1:07 PM, mvaneijgen said:

In the function animationDone() the autoplay variable gets updated autoplay = window.setTimeout(slideLogic, videoDuration);  Here you need to figure out and set the video duration for the next slide. 

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

See the Pen GREebPK by mvaneijgen (@mvaneijgen) on CodePen

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

On 11/11/2022 at 1:32 PM, mvaneijgen said:

@whizzbbig you'll need to find a way to update the autoplay timer for each new slide, I would start by getting the video duration in milliseconds, right now you're getting the duration and multiplying it by 1000, but for some reason this number is NaN eg it is not a number. You will need to pass this number to the function animationDone(), because there it sets the new time out each new slide. 

 

Right now your demo is not debuggable, because the slide animation is not really inviting to look at. But indeed as @GreenSock suggested, make it small again. Focus on one part of your issue and try creating a new pen with none of the other code and try your hand at some stuff, when you figure it out you'll only have to find a way to implement it again, but this way you can rapidly test some ideas and have a demo to show when you get stuck

 

For the thumbnails, you place a number in it, just change that for the HTML you want. Right now I've place random images in there instead of numbers, but this can be what ever you want. 

 

 

 

 

The demo I've shared is the result over half a years work when I started out learning GSAP, in that time I made several version that just didn't work, but I kept at it, trying other things, reading documentation, this forum. Until I found something I was happy with. Sadly I don't have the time to modify this pen to suite your needs, but I know if you start out simple and try a few things (that probably don't work), you'll find a solution that does work! If you need help with anything particular in GSAP, make it small again or there is always "Jobs & Freelance" forum for paid consulting.

 

Hope it helps and happy tweening! 

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

17 hours ago, GreenSock said:

Are you saying that conditional block doesn't run (as if window.Draggable doesn't exist)? Are you using a build system where you do an import at the top of your file? That'd certainly explain it because when you use ES Modules, the class isn't added to the window object. Another explanation could be that you're trying to reference Draggable before it even loaded. Very difficult to troubleshoot blind, but those are two guesses. 

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 😂

On 11/11/2022 at 1:32 PM, mvaneijgen said:

@whizzbbig you'll need to find a way to update the autoplay timer for each new slide, I would start by getting the video duration in milliseconds, right now you're getting the duration and multiplying it by 1000, but for some reason this number is NaN eg it is not a number. You will need to pass this number to the function animationDone(), because there it sets the new time out each new slide. 

 

Right now your demo is not debuggable, because the slide animation is not really inviting to look at. But indeed as @GreenSock suggested, make it small again. Focus on one part of your issue and try creating a new pen with none of the other code and try your hand at some stuff, when you figure it out you'll only have to find a way to implement it again, but this way you can rapidly test some ideas and have a demo to show when you get stuck

 

For the thumbnails, you place a number in it, just change that for the HTML you want. Right now I've place random images in there instead of numbers, but this can be what ever you want. 

 

 

 

 

The demo I've shared is the result over half a years work when I started out learning GSAP, in that time I made several version that just didn't work, but I kept at it, trying other things, reading documentation, this forum. Until I found something I was happy with. Sadly I don't have the time to modify this pen to suite your needs, but I know if you start out simple and try a few things (that probably don't work), you'll find a solution that does work! If you need help with anything particular in GSAP, make it small again or there is always "Jobs & Freelance" forum for paid consulting.

 

Hope it helps and happy tweening! 

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

1 hour ago, whizzbbig said:

 

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

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

51 minutes ago, whizzbbig said:

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 

 

 

 

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 

See the Pen rNKjKzN?editors=1000 by raj-shukla (@raj-shukla) on CodePen

33 minutes ago, mvaneijgen said:

Sliders are really hard and need a lot of setup to get right. I've build my self a starter template which I use often to then customize for what I need a that moment. It's by no means perfect, but the logic is there. I have no idea how it would work with video, but I think it could maybe nudge you in the right direction. Everything has comments to better illustrate what is going on. 

 

Hope it helps and happy tweening! 

 

 

 

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!

See the Pen GRGrWjo by raj-shukla (@raj-shukla) on CodePen

6 hours ago, OSUblake said:

Do you have a minimal demo? Even with one, this doesn't appear to a GSAP issue. I would suggest trying to log out if the spans are even there before you go digging into GSAP.

 

Ex...

console.log("spans", this.elements.titleSpans)

 

If it's null, not a proper selector, element, or node list/array of elements, then the issue is somewhere else in your code.

 

yes thanks for the help !

On 3/6/2022 at 11:34 PM, Cassie said:

Hey there!

I'm not that familiar with vite or prismic I'm afraid, but I assume you're trying to target something before it's in the DOM?

If you can pop together a minimal demo on codesandbox for us we'll take a look for you.

 

Thanks!

 

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.

On 11/17/2021 at 4:01 PM, OSUblake said:

If you need help, please provide a minimal demo. We can't tell what's supposed to be happening from that code snippet as there is CSS, HTML, and a bunch of other factors that go into an animation. We don't need to see your entire project, nor any code related to preloading like a promise. Just a simple demo that shows the issue.

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

10 hours ago, mikel said:

Hey WHIZZBBIG,

 

This could be an option:

 

 

 

 

Happy tweening ...

Mikel

Hi sir i tried to adapt that working and i did it now the problem is with the position and also with the timing

See the Pen GRmQBVz?editors=0010 by raj-shukla (@raj-shukla) on CodePen

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.

See the Pen GRmQBVz?editors=1010 by raj-shukla (@raj-shukla) on CodePen

17 minutes ago, akapowl said:

 

Please don't ping people like that all the time.

 

When one of the regulars helping here finds the time, you will be helped - no need to @ anyone for help.

 

 

 

 

As I can not tinker with your code there is not much I can tell you about that - debugging a live site is pretty much out of scope for these forums.

If you need any assistance - if this is GSAP related -  please provide a minimal demo of your problem boiled down to an absolute minimum, ideally on codepen.io.

 

To me it looks like that has nothing with GSAP though and is more likely related to locomotive-scroll and as Jack already mentioned, we don't support locomotive-scroll in these forums as it is a 3rd party library.

 

Sorry for pinging 🙏

by adding 

```js

mobile: {
     smooth:true;

}

```

fixes the issue