Shaun Gorneau

I think what you’re looking for is
 
https://barba.js.org 

Hi @aleangelico,
 
Yes absolutely. But I'm unsure what you're trying to achieve ... you have what appears to be conflicting stuff going on. Here is an example of properties being tweened during the duration of a longer tween.
 

See the Pen rNYprdo?editors=0010 by sgorneau (@sgorneau) on CodePen
 
 

Hi @fionchadd,
 
I don't see anything wrong with multiple triggers so long as, like your second example, you can wrap it in a loop to build it out for you. Your second example is very close, the only thing was you were not adding the necessary pixel offsets to the `start:` as you did in your first example. This should do it (plus it's a bit simplified).
 

See the Pen WNXXKVY?editors=0010 by sgorneau (@sgorneau) on CodePen
 
Hope this helps!
 
Shaun

Hi @initium,
 
Moving an image from the bottom can be handled by translating the image on the Y axis from either
 
off below (meaning the height of the viewable area) the viewable area to 0 or on the viewable area (0) to off the top (minus the height of the viewable area).  
Here is a verbose example to show you what I mean.
 

See the Pen oNoodpo?editors=0010 by sgorneau (@sgorneau) on CodePen
 
In a practical execution you'd want to compute things like the viewable area height and wrap the timeline buildout in logic to accommodate any number of slides and any variation on height/width.
 
Hope this helps!
 
Shaun
 
 

Hi @flefloch,
 
The reason for this is that CSS transforms do not disrupt flow. The parent element still sees it in its original position and behaves accordingly  So, there are a few ways you could handle this.
 
You could change the element's position property to absolute after the tween, that way the parent is sized based on the new flow.

See the Pen OJgXqLM by sgorneau (@sgorneau) on CodePen
 
Or you could tween the parent's size (depending on how dynamic this scenario is).

See the Pen powbYzr by sgorneau (@sgorneau) on CodePen
 
There are certainly other ways to handle this depending on the complexity of the overall scenario.
 
Hope this helps!
 
Shaun

Hi @Alexander S.,
 
One way you can achieve this is to move from a tween to a timeline and allow scrollTrigger to control the timeline. Then, you can tack on an empty tween with a relative position to achieve the "pause" ... which is really just a tween affecting/doing nothing for a specified amount of time.
 

See the Pen KKWNvaL?editors=0010 by sgorneau (@sgorneau) on CodePen
 
Hope this helps!
 
Shaun

Hi @ZORGOBORGO
 
You can accomplish this with GSAP alone (which I would recommend) by pulling that tween out of the timeline and making a call to a separate tween at that point of the timeline (with a conditional check to see if it's already been called).
 

See the Pen wvJovBd?editors=0010 by sgorneau (@sgorneau) on CodePen

Hi @scavaliere,
 
Two quick things.
You can't start an id with a digit, it must start with [A-Za-z] Before scrollTo can do its thing in response to clicking on an anchor, you must first prevent the default behavior (which is to jump to the position of an element with a matching name or id)
See the Pen BapbRXv by sgorneau (@sgorneau) on CodePen
 
Hope this helps!
 
Shaun

Hi @Kelimino,
 
A few things that stand out to me are 
You're recreating the timeline multiple times rather than adding tweens (or other timelines) to it While call() would work here on appending tweens/timelines, you are appending it to a single timeline each time that timeline is recreated Unrelated to the issue; if you define a from() tween, it will perform that tween from the defined property values to the element's current values, so you don't need to follow up with a to() tween ... unless your defined end target values that are not the values in place before the from() is called. I think an easier way to handle this would be with ScrollTrigger.create() and not make use of any timelines (along with not worrying about defining any toggleActions). I think it's easier to use the callbacks onEnter and onEnterBack to update the counter and perform a simple tween on it.
 
Also, adding end points gives you better control over when to trigger onEnterBack for better usability. Without defining them here, onEnterBack into slide 1 would not be triggered because the scroll can't reach the trigger point.
 
Have a look here,
 

See the Pen KKaEgvZ?editors=0010 by sgorneau (@sgorneau) on CodePen
 
Hope this helps!
 

Hi @scavaliere,
 
A few quick things I notice (in general) that you'll want to fix up ... 
autoAlpha (as all properties are) is case sensitive. I notice your were typing `autoalpha` opacity is affected by autoAlpha, so you should not define values for both properties you mixed gsap and TweenMax. TweenMax is old syntax, you should only use gsap.method() Now, for your specific issue, because you're wanting to establish some sequencing, you should use a timeline rather than a simple tween. Have a look here,
 

See the Pen XWpoqwJ?editors=1010 by sgorneau (@sgorneau) on CodePen
 
Hope this helps!
 
Shaun

Hi @Sam Smith,
 
There are two was you can tackle this ... each affect it differently. If you want to change the opacity of the star, you could tween the opacity of the element that has the star.svg assigned as a background (just as you would for any element with an image as a background).
 
But, I think you want to affect a specific attribute of the SVG, not the element presenting the SVG itself. For that, the SVG needs to be in the markup to be accessed like any other DOM element.
 

See the Pen rNjoWKj by sgorneau (@sgorneau) on CodePen
 
Shaun
 

Hi @Conill Blanc and welcome to the forums!
 
If I understand correctly, I think what you're looking for is to sequentially tween 4 elements; the image, a blue border, a magenta border, and a yellow border. Something like this,
 

See the Pen JjERyYg by sgorneau (@sgorneau) on CodePen

Hi @Paz,
 
This is a combination of some initial values, set()s, to()s and from()s; they can come together to create unexpected results because some values are applied before the tween begins. I find in cases with several tweens in a timeline, it's best to use set() up front to establish inital property values, and then use to()s from there. Have a look,
 

See the Pen bGgmqmJ?editors=0010 by sgorneau (@sgorneau) on CodePen
 

Hi @Whitfield,
 
You certainly can do it with a clip-mask ...
 

See the Pen GRrXVZx?editors=0110 by sgorneau (@sgorneau) on CodePen
 
But, I like the control that is afforded by animating a parent container within a wrapper, especially when it comes to tweening other properties at the same time. What's the reason you are hoping to move away from a wrapper? Is it the extra markup? If that's the case, you can have Javascript create the wrapper, that way your markup stays lean/focused.

@AlexN welcome to GSAP!
 
The trick here is to yoyo each individual stagger tween but repeat the overall "to" tween (not the stagger). The other little tidbit is that yoyo only works if there is a repeat value greater than 0. So repeat -1, 0, or no value will not produce the yoyo. Putting repeat: 1 within the stagger will take care of that. Have a look here,
 

See the Pen abpmqjw by sgorneau (@sgorneau) on CodePen

Yeah, that's my fault. The code I posted has window.scrollTo(0,0); inside the setTimeout ... so that call is delayed. Moving it out should take care of that.
 

See the Pen qrzLBx#section-3 by sgorneau (@sgorneau) on CodePen

A few things ...
 
1. With vid.addEventListener ... you haven't defined `vid`
2. Your getElementById selector for the video doesn't match your id on the video element
3. I changed the visibility property to opacity
4. Start with the overlay opacity at 0 to avoid a flash at the beginning
 

See the Pen evragw?editors=0010 by sgorneau (@sgorneau) on CodePen

Because of the way transforms work, the images themselves will have no affect on each other if transformed directly. Illustrated here,
 

See the Pen evyVjE by sgorneau (@sgorneau) on CodePen
 
So, to make them transform "together" is right on with your line of thinking; transforming the parent. Illustrated here,
 

See the Pen qrpxMy by sgorneau (@sgorneau) on CodePen

.progress(1) should go right to the very end of the timeline with no amount of tweening. That is unless progress itself is being tweened; e.g.
vat tl = new TimelineMax(); TweenMax.to( tl, 1, {progress:1} ); Do you have a codepen illustrating your issue?

Have a look at this pen
 

See the Pen rywjQW by sgorneau (@sgorneau) on CodePen

I've forked the pen above to introduce "snap points".
 
What I've done is calculated the width of 1 tile divided by the width of the animated container to get a decimal representing the increment on a 0 to 1 point scale (which is appropriate for the timeline) for each tile movement (just multiply that number by 100 for the 0-100 scale value the jqueryui slider uses). I also have an array of "snap points" built using that increment decimal times `var i` in a loop up to the number of tiles in the animated container; which is the total number of tiles minus the number visible at any given time ... in this case, 9 total with 3 visible ... that gives us 6 snap points. Lastly, I have a function that looks through an array (our snap points array in this case) and finds the closest value it contains compared to any number passed to it. So, when the UI slider is done "sliding", its position/100 is passed to this function, the function looks through the snap points array to find the closest value, that value is returned, the timeline is animated to that value and the slider's position is animated to that value*100.
 
Important thing to note here ... I have set `ease: Power0.easeNone` (line 44) on the timeline ... easing will interfere with the 0 - 1 scale with regard to equal, incremental chunks for the snap points. I am, however using an ease when tweening the timline progress to the snap point value (line 71).
 

See the Pen mWRZob by sgorneau (@sgorneau) on CodePen

One thing I would offer is, rather than looping through the navigation <li>s and assigning a click action to each independently, I would put a generic class on each (`nav-opt` in my example) along with an index data-attribute to quickly get its "place" and navigate with the same logic you used.
 
I forked your pen and added a bit where you are constructing the navigation to add the generic class and the data-attribute, and modified your click event handler at the end.
 

See the Pen ZeBKKW?editors=0110 by sgorneau (@sgorneau) on CodePen

I'm not sure which side of this the question is on ... how to execute the animation or how to feed actual data to the animation progress.
 
Here is how to animate a loading bar
 

See the Pen vyYQJO by sgorneau (@sgorneau) on CodePen
 
To control it with actual progress data, simply pause it from the get go and continually set the progress property with an updated value based how how you are calculating actual progress on a 0 to 100 scale.

Here is a quick example 
See the Pen qadqxE?editors=0110 by sgorneau (@sgorneau) on CodePen
 
And just a note ... this only shows 1 image sliced ... no transition to another image behind it. All that would require is the same manipulation principles (and CSS to stack the .jalousie divs) and placing these tweens into a timeline.
 
And by adding a few data attributes to each .jalousie divs to swap in some hardcoded settings, you can give more control about number of slices, speed of animation and direction of animation) to complete the package.

Oh, OK. Instead of moving -=200px, you should move the entire width of the strip minus the window width. When it reaches the end of the strip (or, more precisely, when it reaches the end of the tween which happens to be the length of the strip - the window width), it will just naturally stop. With the right button you can just call reverse().
 

See the Pen JXrYoX?editors=0010 by sgorneau (@sgorneau) on CodePen