codebloo

oh no I'm sorry my question has spurred so much forum-centric drama 🙈

18 hours ago, PointC said:

Just my two cents but I'd take advantage of the .wrap() utility method and target the container and the image in the same tween. You could check the index of the loop target and flipflop the .wrap() array depending on whether the index is odd or even. That way you wouldn't need to add the extra class to your HTML markup. You can then add a bunch of copies of the targets without worrying about the left/right class. Maybe something like this:

 

 

 

 

More info about .wrap()

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

Use it or not. Just a thought. YMMV.

 

Happy tweening.

 

Thank you! This makes a lot of sense of how it's structured. I will read up on wrap, thank you!

20 hours ago, akapowl said:

 

This exact line only contains placeholders so it won't help much putting that anywhere.

 

You'd have to adjust it to the element you want to check for a certain class on and put it on every tween of your timeline that you want to use one value to tween from if the current image has that certain class and another value if it doesn't - in your case that would be both .from-tweens.

 

 

ah thank you! that "classList.contains". makes a lot of sense now that i see how it's written out, thank you!

 

7 hours ago, iDad5 said:

 

 

 

Not the most elegant solution, but I guess it points in the right direction.

 

(I had trouble at first getting the elements with querySelectorAll() - it was due to saving and rerun errors in codePen, but I thought that it might be due to the script running before the DOM was ready. So I encapsuled it in a function, as that's generally not a bad idea I left it that way and registered the plugin too)

 

As your code essentially  made a timeline with a scrollTrigger for each element I decided that I just select the element inside a left container and do the same wit those inside a left container. I did it by copying, you can make that more elegant, but that's up to you.

thank you for putting this up. Yes I tried this version where I duplicated the whole block but figured there mist be a way to more cleanly integrate the alternating

6 hours ago, akapowl said:

 

Hey @codebloo - welcome to the forums.

 

There are various ways to this.

Which would work best for you depends on a) how complex you want things to become in the end and b) what is best for you to wrap your head around.

 

You could e.g. create different arrays/nodelists for left and right and loop over each of them and create everything individually (as iDad5 showed above) or you could leave things as you have them right now and include an if condition in your loop to check for a class on your image and create everything individually for the different conditions or (and in a simple scenario as your demo this would probably be most convenient) use a ternary operator for your xPercent value that does the same conditional check as above - just right at place and with less code.

 

xPercent: element.classList.contains('this-class') ? -100 : 100

 

 

 

This could be a nice test-case to become more fluent with JS, so I will leave that up to you  

Give it a shot and let us know if you run into a problem with the implementation and we'll be glad to guide you in the right direction.

 

On a sidenote: 

It is recommended to use the new syntax. Migrating your code is not that hard and could save you some troubles further down the line.

 

thanks for your help. 
I understand most of what you said in theory but not in practice.
Where would I put the xPercent: etc line?
thanks again!

2 hours ago, iDad5 said:

That shouldn’t be too hard.

First thing that comes to my mind is using gsap.to() ist’s not important from where an element is starting it“s just moved to the (same) coordinate x or left in your case. 
you could either built a timeline that is controlled by a ScrollTrigger  or attach a  ScrollTrigger to each element which would be probably the easier way. 
 

If those hints don‘t help, I or others surely will help in more detail. Good luck. 

Hi thanks for your suggestions!We're on the same page. I have a ScrollTrigger timeline built (in my codepen example above) it's the batch alternating factor that has me stuck since it needs to be tied to the class but the classes also alternate. Fingers crossed for a code solution

Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already.
I am having trouble animating an alternating entrance point based on class name.
 

In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right.

Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block  with the alternating positioning done with Flexbox)

I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. 

Many thanks for your help!

See the Pen jOVoQxZ by codebloo-the-lessful (@codebloo-the-lessful) on CodePen