[Is it possible to reverse timeline tweens all at once?]

9 minutes ago, synthwavenomad said:

@Xenex122 Sure here is a little CodePen 

.

So basically you will see the tweens execute in order as expected. But I would like on button click to reverse all the tweens at the same time not in order if that makes sense?

 

If you don't want to animated it by reversing 

demoTL.reverse(-1);

 

[Is it possible to animate by changing 'relative' css property on parents?]

38 minutes ago, mea_culpa said:

I want to move 4 arrows to span, with '.target' class (in attached screenshot is my goal). Im using VW units, bcs I need it responsive proof on 1280px+ screens. Using some native features like getBoundingClientRect it is a bit crooked, and while changing window size it gets even worse (or maybe it is only while inspecting). Is there any other way like adding 'relative' css property to another parent on load with GSAP, or something like this? Or maybe someone has any other ideas to achieve this?
Thanks in advance!

If you mean centering the compromise of your target you should do it in this way

 

const span = document.querySelector('.target');
var rect = span.getBoundingClientRect();
var rectParent = span.parentElement.getBoundingClientRect()
const offsetLeft = rect.left - rectParent.left - 10;
const offsetRight = rect.right - rectParent.left - 5;
const offsetTop = rect.top - rectParent.top;
const offsetBottom = rect.top - rectParent.top + rect.height;

This now will center your responsive target...where did I get the '-10' and '-5'? it based on your arrows and borders.

Just copy this and change it or see for my codepen 

See the Pen RwQeWmV by myth-vince (@myth-vince) on CodePen

[Is it possible to reverse timeline tweens all at once?]

Can you provide a simpler example? I wanna help before I sleep hahha.

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

1 minute ago, Cassie said:

If you're trying to do the header animation that's nothing to do with velocity.

 

 

I don't know what this means? Are you asking what self is in this context?

 

 

 

Yes all inside the self functions...cause I believe there is something more than self.getVelocity right?

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

2 minutes ago, Cassie said:

Which bit - the header text animation with the outlines or the staggering effect further down the page? If you're wanting to do the staggering that's going to look really awkward without smooth scroll. When people use mousewheel without smoothing the velocity will jump.

 

I'd just suggest using ScrollSmoother to be honest.

I see but..onUpdate function there is a lot of self  function call right like? rather than self.getVelocity() is there anything related on it? I don't find anything here in the docs or other things that can be used in self.function callbacks. ???

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

Just now, Cassie said:

Are you trying to do something like this pen without scrollSmoother?
 

 

hahahaha...to be honest yes..I'm finding a way to do it without using it hahaha..

[Scrolltrigger animation starts from a different position than the end of the first animation]

No, why did you change it in the last line of codes..I only talk about the top of your codes in which is before the scrollTl. 

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

@Cassie I'm almost close to it but there is something wrong here..Instead of the stroke-text should be the one moving..The main text is the one moving..Look at this 


Do I have something to add here ? or what?

let Velocity = gsap.quickTo(layer,"y")

Update Its kinda work fine for me now 

 

 onUpdate: self => {
                            // const velocity = velocity*2
                            console.log(self.getVelocity());
                            // console.log(velocity*2)
                            velocity = (self.getVelocity() / -25) * speed
                            Velocity(velocity)
                        },

this works fine now @Cassie thanks.

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

Oh this really looks hard...

[Scrolltrigger animation starts from a different position than the end of the first animation]

@samlinck I believe this is what you are looking for? 

See the Pen abqRzaJ by myth-vince (@myth-vince) on CodePen

 

        tl.add('start')
     
        .to('#dotLeft', {duration: 1, x: 32}, 'start')
        .to('#dotRight', {duration: 1, x: -32 }, 'start')
            });

        };

just change the #dotRight into "x:-32" so it won't back in initial position..xPercent and x has different roles.
 

[Boucing block reveal]

@heavylifting A greenshock give me a piece advice that instead of using cssrule just pass a global variable..I think this one might help you..I don't know much about what you are talking about bounce in the end but change your cssrule into global variable

 

See the Pen VwQEYpz by myth-vince (@myth-vince) on CodePen

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

Oh I see I've updated it now but I can't pass my const "velocity" inside of it. I want to increase the amount of "velocity" not the getVelocity() that you are talking about. I've updated it in the below of scrub 

 

onUpdate: self => {
                              const velocity = velocity*2
                              console.log(velocity*2)
                          }

See the Pen MWQPgOo?editors=1111 by myth-vince (@myth-vince) on CodePen

and it giving an error in console like 
 

Quote

Uncaught ReferenceError: Cannot access 'velocity' before initialization

EDIT: I also try getVelocity but I can't pass it to the "velocity" const. 

 

velocity = self.getVelocity()

EDIT 2:

Oh nevermind I should put it as "let velocity" not "const velocity" my bad..don't mind me I got it.

[How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.]

My explanation is same as the title...Can I increase my data-motion whenever I'm scrolling down in the screen and also get its new value of "motion" as it keeps scrolling up or down 
 

                        scrub: function s(e) {
                            velocity = velocity * 2
//                           This doesnt console.log the velocity.
                            console.log(velocity)
                            return speed/2
                        },

You can see it here in the javascript part..the scrub is working though but I can't console.log out the velocity or change the data-motion to "velocity".. What I mean here while I'm scrolling I'm supposed to get some value in the console either scrolling Up or Down.

See the Pen MWQPgOo by myth-vince (@myth-vince) on CodePen

[The arrow should follow the mouse direction in container by rotating.]

Oh nevermind I got it sorry 
 

            let yDif = e.clientY - rect.height,
                xDif = e.clientX - rect.width; 
I just have to something like this.

 

[The arrow should follow the mouse direction in container by rotating.]

1 hour ago, GreenSock said:

Sorry, I don't understand your question. 

 

Please read the docs if you want to understand in more detail what .quickTo() is: https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

It is **NOT** a replacement for gsap.to(). Very different purposes and method signature. 

 

Why are you trying to change it to to() in the first place? 

From the earlier question sir.. How do I do it if its inside the box or something? 

I have a new codepen here that can you make clarify on it.

See the Pen xxYaNGp by myth-vince (@myth-vince) on CodePen

As you see I change a bit the "x,y" with a 

var rect = box.getBoundingClientRect()            
const x_ = e.clientX - rect.x;
const y_ = e.clientY - rect.y;
			
let yDif = y_,
xDif = x_

because the arrow is not following the mouse direction in your earlier code cause it only works in a parentDiv...but my function here is almostly work but there is something wrong where it doesn't fully rotate on the top left side of the arrow. Can you notice my mistake her sir? 

I believe the missing thing here must be something in 

 

if (Math.abs(xDif) > 3 || Math.abs(yDif) > 3) {
                console.log(xDif,yDif)
                x = x_;
                y = y_;
                // This one will rotate the '.rotate' while the cursor is moving
                // _short is used for make rotation is n right rotation.
                rotateTween.vars.rotation = (Math.atan2(yDif, xDif) * RAD2DEG - 40) + "_short";
                
                // This one will restart the method rotation so it can rotate again once the mouse
                // is move
                rotateTween.invalidate().restart();
            }

 

[The arrow should follow the mouse direction in container by rotating.]

hahaha.. well just might to do some new trick in it..

[The arrow should follow the mouse direction in container by rotating.]

Can I ask if the quickTo is somehow related to mousevent? because when I try to change it into .to() it doesn't move.

[The arrow should follow the mouse direction in container by rotating.]

oh I see thanks sir..I never thought this is the solution.

[The arrow should follow the mouse direction in container by rotating.]

My problem here is I don't know how can I make the arrow follow as the direction of mouse as I passed it through my root variable. Any idea how can I achieve this?  It just keeps rotating and rotating when I'm trying to move it around the screen. 

Example if it goes like 30deg of the direction of the mouse then it the arrow should be there also. since it has 360deg I don't know how to do it and pass it in global variable.

See the Pen XWZPOoY by myth-vince (@myth-vince) on CodePen

[How to half split the screen UI]

uh @SteveS how can I do it if there is a body like this 
 

body {
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

CAuse I want to center it but it the animation clipper is just teleporting suddenly when I try to hover the image.

 

See the Pen eYVLJYm by myth-vince (@myth-vince) on CodePen

I also updated the javascript you do..instead of e.target.BoudingClientRect() I did something like this cause I want to avoid bugs 
 

overlap.addEventListener("mousemove", (e) => {
  var rect = overlap.getBoundingClientRect()
  gsap.set(clipper, {
    width: rect.width - (rect.width - e.clientX)
  })
})

But now the only problem is when I center it or relocate it in any position of my screen..It does have kinda have a bug.

When it is in the large screen it just teleported to right but if its small its seems normal.

 

Nevermind I already got my answer. Thanks buddy!!!

[How to half split the screen UI]

I know this is unrelated to gsap but I feel people a lot know of javascript here so I hope you guys can help. The following idea that I tried is this

As you can see in my title it means the screen is half split..I was almost close to it...But I can't achieve the "width" and the "left" maybe in this around of the field. 

This is the my own understand of it. It shouldn't collapse and it must only in the center of screen...as same the original of idea of codepen 

See the Pen gOvdaLm by myth-vince (@myth-vince) on CodePen

I know this is unrelated in gsap but since there is a lot of advance animator here and stackoverflow can't help me through this so I hope someone can get me through this.

See the Pen bWKMoK by tutsplus (@tutsplus) on CodePen

[Why my pin affected the callback in my reactjs]

damn at first part I didn't notice it..So it supposed to have a parent when the pinspacer is null.. I see thanks.

[Why my pin affected the callback in my reactjs]

I've got an issue with a one file. So basically I have separated files for able to call the file The issue I am getting is something like this Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

You can see it in here in the line of

            {NAME == "Spy" ? <> 
            <Spyxfamily></Spyxfamily>
            </> : <></>}
            {NAME == "Slime" ? <> 
            <Slime></Slime>
            </> : <></>}
            {NAME == "Darling" ? <> 
            <Franxx></Franxx>
            </> : <></>}
            {NAME == "Onepiece" ? <> 
            <Onepiece></Onepiece>
            </> : <></>}
            {NAME == "redo" ? <> 
            <Healer></Healer>
            </> : <></>}
            {NAME == "dragon" ? <> 
            <Dragonball></Dragonball>
            </> : <></>}
            {NAME == "naruto" ? <> 
            <Naruto></Naruto>
            </> : <></>}

The part in Healer is where I am getting the error.

So in this part I will show my CODESANDBOX https://codesandbox.io/s/cool-robinson-ep6oj4?file=/src/index.js to briefly explain it.

I'll try to make it shorter. So basically go in the Introduction.jsx and the first code snippet you can find it in the code 205 lines If you try to choose/click other options you can clearly tell that nothings happening except the Healer.jsx ( after clicking this option try to click again the navbar button) file and I don't know why it is like that.

When you try to remove/comment out the whole useEffect() function of the Healer.jsx it can shows that nothing error will happen.

The navbar options button is at the top right side of screen. I can't show the full codes but I can only show the parts. Anyone can help me here? I don't understand why it giving me an error even though the codes is quite clear for me.

UPDATE : Anyway I find the issue that the pin make this causes..If I set it true, it will affect the DOM Node but if not nothings will happen.

[How to separate my images as it scrolls down by scrollTrigger with specific positions.]

Nevermind I already got the solution 

gsap.registerPlugin(ScrollTrigger)

const back = document.querySelector('.back')
console.log(back.clientHeight*10)
const all = document.querySelectorAll('.items')

const list = [
  {x:"10%",y:"20%"},
  {x:"30%",y:"30%"},
  {x:"20%",y:"60%"},
  {x:"40%",y:"80%"},
  {x:"60%",y:"20%"},
  {x:"85%",y:"80%"},
  {x:"60%",y:"60%"},
  {x:"80%",y:"80%"}
]

var timeline = gsap.timeline({
    scrollTrigger:{
        trigger:back,
        start:"top top",
        end:"center top",
        end:() => `${back.clientHeight*10}px`,
        scrub:true,
        pin:true,
        markers:true,
        toggleActions:"play reverse play reverse"
    }
})

all.forEach((elem,i) => {
    // console.log(list[i].x,list[i].y)
  timeline.to(elem,{
    top:`${list[i].y}`,
    left:`${list[i].x}`,
    ease:"none",
  },0)
})

Just put the thing like this and remove the for loop in the SCSS just copy my own list.

[How to separate my images as it scrolls down by scrollTrigger with specific positions.]

So basically the problem here is simple but I don't know how to it..Basically like this...Every box is on the center and as I scroll down they will be separated each other as I keep scrolling down.. The sample idea is in my codepen..As they were separated..but I want them to be in center and go there specific locations as I scroll-down. How can I achieve this? Thanks for the help.

See the Pen abqjmBw by myth-vince (@myth-vince) on CodePen