[Flip animation jumping from one-parent to another-parent while scrollTrigger]

The scroller end doesn't reach the end. Try to either reduce the top of the endTrigger from 10% to 0 or lower or make the viewport bigger for it to reach and see if this works for you

 

I recommend you to add markers: true. It's easier for you to debug it: 

 

[Different snapping point when directional is false]

Hey there.

 

There is one question that is bothering me and avoided it for quite some time.

 

In scrolltrigger you have the directional property. If it's true you get to the last intended snap on a small scroll. If it's false you get it to the closest value so that is I suppose around the distance from a to b splitted by half . But with directional false can you change how close that value is ? 

 

Right now it's working this way:

 

Values: [0, 0.5, 1]

 

0 -> 0.5 it will snap at 0.25 this means 50% of 0.5 . But can we snap to 0.5 when it gets to the 0.1 value that means 20% ? 

0.5 -> 1 it will snap to 1 at 0.75 . Can this be change to 0.6 to snap to 0.75? this means 20% ? 

 

 

See the Pen ZEMpYKR by danielmtd (@danielmtd) on CodePen

[Re-renders of the CSS animation in ScrollTrigger pinned container]

Css animation don't play nice with elements that are moved around the dom using js ( this includes cloning / wrapping / unwrapping / appending )

 

This is why:

- on load the css animation is rendered and played

- after html & css is loaded js comes into play and starts altering the object ( in this case it gets wrapped into a pin-spacer div). This causes the animation to play again ( because css is like: hey a new element appeared and I have properties for it so let me reapply them. Oh an animation. Let me play it. Oh it already played, let's restart it) .

 

This can be viewed at its best if you constantly wrap an element into a div: here is a simple extreme case:

See the Pen MWGWgMZ by danielmtd (@danielmtd) on CodePen

 

Try to resize the window and observe that the animation is constantly restarting on each resize ( this thing is happening in your case. On load the element is wrapped inside pin-spacer, on resize the pin-spacer is refreshed - this means that the container is unwrapped and wrapped again ).

 

Now how can you avoid this ? There are 2 solutions:

 

1. As quoted above you can create another element ( replace pseudo with any valid html element ) and use gsap.

2. Use transition instead of animation. Here is an example:

See the Pen rNvNNza by danielmtd (@danielmtd) on CodePen

 

[MatchMedia + SVG attributes]

I confirm as well that this may be a bug.

If you need a fix asap a workaround would be to apply the tween on group instead of the path. Or you can remove the x/y from your path. 

 

See the Pen dyebqJQ by danielmtd (@danielmtd) on CodePen

[Horizontal Scroll Error]

Hi and welcome

 

You don't have a panel class. Your panel is in fact hs-img. Here:

 

See the Pen WNzVJqE by danielmtd (@danielmtd) on CodePen

[Is it possible to use CSS variables in scroll trigger to define trigger location?]

You're not a bother no worries. I was in your place as well.

Just make it a function and call it in the start ( it can be a method as well) . Also you can refresh the tween on resize for a smoother transition on height change. Without it still works but the refresh is debounced.

 

Here:

 

See the Pen ZExgQar by danielmtd (@danielmtd) on CodePen

 

[Is it possible to use CSS variables in scroll trigger to define trigger location?]

Everything inside ' ' or " " is called a string but when you change these to backticks ` ` it's transformed to a template literal that it's still a string but it gives you the option to add variables inside it and supports multiline strings. It's just sugar syntax to make the code more readable. 

 

For short: 

`top ${property}` can be easily replaced to 'top ' + property or "top " + property

 

You can read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 

If the trigger location is set top it may not find that css variable ( check for typos ). Try to log it in your website and see if it outputs something.

 

See the Pen oNqKoWo by danielmtd (@danielmtd) on CodePen

 

 

[Basic scrolltrigger animation not resetting on page refresh]

Hey,

 

Most probably the min_tallestBox() and min_highesBoxes() were the main issues. You can try fiddling with it by removing the refresh from the document.ready and check if the issue reoccurs.

 

It's no harm if you're adding it multiple times most probably the method already verifies if start / end position has truly changed or not so is up to you.

As a word of advice I would refactor the top code like this :

 

// Add bottom padding to blocks before


$(document).ready(function() {
  $(".expanding-video").prev().addClass("bottom-excess-video");
  $(".expanding-image").prev().addClass("bottom-excess-image");
  $(".expanding-video").next().addClass("top-excess-video");
  $(".expanding-image").next().addClass("top-excess-image");
  
  // try to remove this ScrollTrigger.refresh() and see if the issue appears.
  ScrollTrigger.refresh()

});

[Is it possible to use CSS variables in scroll trigger to define trigger location?]

Hey,

 

Yhep you can but first you need to get that property using gsap.getProperty(). Here is an example: 

 

See the Pen ZExgQar by danielmtd (@danielmtd) on CodePen

 

More details: https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

P.S you can animate css properties as well: 

 

[Basic scrolltrigger animation not resetting on page refresh]

In this case yes. If this doesn't work the culprit may be somewhere else. Usually you call .refresh method if the total page height is changed using javascript. 

 

This applies on async calls as well. For example if you have content that comes later you need to call ScrollTrigger.refresh after the content is painted on the screen to push those markers in the right position. 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

Edit: 

I think your culprit is in here :

function min_tallestBox() {
  var tallest = 0;
  $('.match-height').css('height','auto')
  $('.match-height').each(function() {
    if ($(this).height() > tallest) {
      tallest = $(this).height();
    }
  });

  $('.match-height').each(function() {
  	$(this).height(tallest);
  });
  
  // what you need to add
  ScrollTrigger.refresh()
}

 

Also 

 

function min_highestBox() {
  var highest = 0;
  $('.post-tags').css('height','auto')
  $('.post-tags').each(function() {
  if ($(this).height() > highest) {
	highest = $(this).height();
  }
  });

  $('.post-tags').each(function() {
  $(this).height(highest);
  });
  
  // what you need to add
  ScrollTrigger.refresh()
}

 

See if this fixes it. 

[Basic scrolltrigger animation not resetting on page refresh]

ScrollTrigger.refresh()

Try this after you added those classes and see if it fixes it. 

[Scroll the divs within fixed div]

The easiest approach is to move the heading html inside "vertical-scroll-inner". Those boxes are stationary and have only opacity applied. The only thing moving is vertical-scroll-inner div. I adjusted the original codepen quoted above. 

 

 

[TranslateX with rotation not working properly]

Hey,

 

The .set method applies those properties on load without animating them. If you want to animate both properties at the same time you can add the rotation and x in gsap.to / or .from / or .fromTo depending on what you want to achieve . If you want to chain them you can create a timeline and add those tweens to it. 

 

Here you can find some helpful insights: 

 

https://greensock.com/docs/v3/GSAP

https://greensock.com/docs/v3/GSAP/Timeline

 

Here is a simple example that may help you understand how it works. 

 

See the Pen RwMzoKg by danielmtd (@danielmtd) on CodePen

 

[onComplete never fires or the animation just breaks]

Hey,

 

You need to pass a function to onComplete like this:

 

// normal function

onComplete: function() {
  console.log('finish')
}

// arrow function

onComplete: () => {
  console.log('finish')
}

 

Gsap calls your function something like this: onComplete(). On your logic gsap would call it like: console.log('finish')() which throws an error.

 

Hope this clears up. 

[Scroll the divs within fixed div]

Hey,

Came back with a change. This is what you're looking for ?

 

See the Pen xxWowrp by danielmtd (@danielmtd) on CodePen

 

Also the example you given it's more of a hooking a timeline to the scroll and scrubbing it. There are quite a few examples in here: https://greensock.com/st-demos/ that can help you achieve this. How I'd tackle a problem like this is:

 

- creating a timeline

- debugging it using gsDevTools

- creating the scrolltrigger and addig the animation to it.

 

 

 

[Scroll the divs within fixed div]

Hey,

 

I think that it would be a better approach to apply a scrolltrigger on each selector instead of the whole container .

 

Here is an example:

 

See the Pen eYMaLWL by danielmtd (@danielmtd) on CodePen

 

And instead of pinSpacing you can adjust the height of that container however you like. Don't forget to trigger ScrollTrigger.refresh() after changing the height ( without this the markers are thrown off and you'll not get accurate triggers ).

 

Also you have the option to pin or not the heading based on your preference.

 

Check this article:

 

[Flickering problem in the viewport when scrollTrigger function is used]

Hey,

 

Try removing tweens from images around that section ( especially scale / opacity ) 

Try removing filter: blur ( if you're using )

 

See if this improves the overall perfomance.

 

This is directly related to the browser and from my experience removing these and finding alternatives solved my issue. 

[Slow scrolling and laggy animation on Chrome but near perfect in Safari]

Hey,

 

One thing I noticed is that the sections where you have the filter: blur applied the browser struggles to render it.  I had a similar case in the past ( 1 year ago) and this was due to this filter. You can start by removing it at first and see if this improves

 

The next thing you can do is to remove tweens applied on images especially the transform: scale and opacity. This is a problem I had 1 month ago. Due to transform: scale applied on image using css or gsap caused the image to not render correctly.

 

These all are related to the browser and the only workaround is to replace these.

 

[Scrolling text with images changing on left]

Hi,

 

In this case you could check before applying .fromTo tween if the selector has opacity.

 

See the Pen 3412541bd1c27591de127aeb3c5f8eb4 by danielmtd (@danielmtd) on CodePen

 

For more details on how to use getProperty https://greensock.com/docs/v3/GSAP/gsap.getProperty

 

[Gsap scroll trigger firing at inconsistent points]

Hey Swalker,

 

You need to add ScrollTrigger.refresh() in the callback where you change the height of that/those element(s).

 

Here is an example of what happens when you change the height of an element without triggering the refresh method and with refresh method:

 

See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen

 

As for the replacement. I don't quite know the whole context on what you have in there. In the codepen I just refactored your tweens in a foreach loop. You can revert it back if this causes issues.

[Gsap scroll trigger firing at inconsistent points]

I can see that you're changing the height of log-book-left-side on resize. This may be the issue and the solution is to call the refresh method after you changed the height of the element. The method is: ScrollTrigger.refresh()

 

Please note that if you add dynamic elements / change the height of the elements and this causes the layout to grow / shrink you need to recalculate the start / end markers.

 

Here is a more detailed explanation: https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

[Gsap scroll trigger firing at inconsistent points]

Hey,

 

Tested your solution and I can't replicate your problem. Did you try it outside codepen as well ? Here is a simpler solution: 

 

See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen

[Triggering events between snaps]

Hey,

 

So a little background on this: I'm trying to create a popup with this functionality ( the scrollable container is a div not the body ). The timeline works great but due to jittery in macos / ipad I have to use pintype fixed instead of transform. All good but as I and all know due to how fixed positioning works it covers the whole scroll which makes this div unscrollable. Inside I have some cards / boxes in this case and what I'm trying to do is to make parts of the boxes be clickable with pointer events and the whole container over the fixed to have the pointer-events: none ( so the user can scroll when it's between but not when it's over some links )

 

Now the problem: In this example I'm trying somehow to find the div that is snapped and make all elements inside clickable till you scroll again. After the first scroll it should turn those into pointer events none, once is snapped turn them to pointer events auto. I tried using the update method that scrolltrigger offers and so I did with this little piece of code: 

 

var progress = Math.round(Math.round(i.progress * 100) / 100 * (length-1));

if(typeof boxes[progress] !== "undefined") {
  console.log("it's in range")
} else {
  console.log("it's not in rage")
}

 

It works great but apparently due to rounding it triggers from one element to another without triggering the else . It in essence works as it supposed to  be ( round the 0.21312 to 0, 1.3243 to 1 and so one which is the item index ) but I can't find any solution to catch the middle ground ( where the scrolling is in progress ) . 

 

In this particular case I suppose that the red box inside the white should have pointer-events: auto at init and pointer-events: none once you start scrolling. Once you snap to a point it should turn back to pointer-events: auto.

 

Thanks  .

See the Pen jOZZjpr by vesemir (@vesemir) on CodePen

[Getting offset top if you have a previous pinned section ScrollTrigger]

Thanks a lot for your help.

Another possible solution is to add those offsetPositions to a timeline. Makes it more snappier... 

 

See the Pen oNWjaPa?editors=1111 by visualbadger (@visualbadger) on CodePen

 

 

 

I think I'll stick to the ones with multiple tweens as it's not entirely my decision . Thanks a lot for your time. Really appreciate. 

 

[Getting offset top if you have a previous pinned section ScrollTrigger]

@Cassie  Thanks for the clean solution . It seems the most logical way of doing this type of thing although the request ( not mine unfortunately ) was to immediately snap without any previous movement of the carousel. 

 

Luckily after you posted your solution I headed to docs to see exactly what snap / snapTo does to and I stumbled upon a comment that lighted the solution . 

 

The main problem with mine was this part: 

 

start: () => (i - 0.5) * innerHeight + centerCarousel.offsetTop,
end: () => (i + 0.5) * innerHeight,

 

Where I took the thinking all wrong. So instead I removed the previous pin section and refactored the loop. Instead I added this:

 

trigger: '.carousel-container',
pin: true,
start: () => {
  return "top center+=" + (i * 25 + "vh")
},
start: () => {
  return "top center-=" + (i * 25 + "vh")
},

 

Thanks all for your time . Really appreciate. 

 

For whoever stumbles on this post: 

 

Check @Cassie solution 2 posts before as it's the cleanest. 

 

My final solution: 

See the Pen qBmOPOV by visualbadger (@visualbadger) on CodePen