[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

I've (kinda) found it!

 
Instead of searching for the specific ajax call (that i'm not finding), like this:

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === 'filter_ajax_object.ajax_url') {
  		ScrollTrigger.refresh();	
		console.log('bravo!');
	}
});

without the conditional it works:

jQuery(document).ajaxComplete(function(event, xhr, settings) {
  		ScrollTrigger.refresh();	
});

 

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

9 hours ago, lagalga said:

Other thing i'm struggling with is that when i load more post with ajax, the height of the document changes, and below those news loaded posts the gsap function is not working… How do i load the gsap js when the ajax is triggered?

https://develop.soulsight.es/thoughts/articulos/

 

 

 

i've added this to the JS module right after the tween, but it doesn't work

$( document ).on( "ajaxComplete", function() {
	ScrollTrigger.refresh();  	
});

Just like that:
 

jQuery(document).ready(function() {
console.clear(); // Start with a clean console on refesh

gsap.registerPlugin(ScrollTrigger);

const showAnim1 = gsap.to("#menuSticky", {
        yPercent: -100
      })
      .reverse();
    ScrollTrigger.create({
      id: "max",
      start: () => "600px top",
      end: "max",
      markers: false,
      onUpdate: (self) => {
        showAnim1.reversed(self.direction < 0);
      }
    });
  
  
  $( document ).on( "ajaxComplete", function() {
  	ScrollTrigger.refresh();	
	});
  
});

 

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

i can't reproduce the bug on codepen… i've built the fullscreen menu, thinking its fullheight is interferring with the anchor links target, but not… i only know that disabling the gsap code on that page the anchor links work.

Other thing i'm struggling with is that when i load more post with ajax, the height of the document changes, and below those news loaded posts the gsap function is not working… How do i load the gsap js when the ajax is triggered?

https://develop.soulsight.es/thoughts/articulos/

 

 

 

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

i've set a codepen but the scrolltrigger doesn't work  and the anchor links yes

See the Pen BaeRzzy by lagalga (@lagalga) on CodePen

[Horizontal Scroll Trigger Section breaks Anchor links to content afterwards]

I've got a similar issue… I have scroll trigger activated to show and hide a fixed header... but also, in the middle of a page I have some anchor links that don't lead to where they should. If I enter the url directly, they do work, but not from an "a".
I have the scrolltrigger code in the header template of all pages... do I have to make a gsap code to make a link to anchor?
https://develop.soulsight.es/thoughts/#menuPostsAreas

 

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

i've tested using scale instead of fixed width, it resizes horizontally but it doesn't reposition vertically

See the Pen jORoWay by lagalga (@lagalga) on CodePen

 

I'll try with Flip, let's learn!

 

 

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

the thing is at start, before the animation starts, it don't resize, although the width is set to width: calc(100vw - 100px).

I do need those widths: based on width at start AND 236px at the end… making the value change with scale would involve a formula based on the width of the screen which in the end should result in a value of 236px

 

https://capture.dropbox.com/mpWJ5kxvlCb7CD2F

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

one more thing, sorry…

how do i resize the logo width with window resizing?

I've set it to a portion of vw… and when i resize the window, the logo stays the same size

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

oh, you did it! thank you.

I just updated the codepen, but trasnferred the solution to my wordpress develop site and it runs like butter.
Thank you so much

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

i've just changed 150vh with :

 

const vh = (coef) => window.innerHeight * (coef/100);

…

start: vh(133) + ' top',

 

And it triggers well… the thing is how to hide/show the logo simultaneously with the header? If i set the same animation, the logo doesn't do the first (shrink animation)

 

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

i don't know if this is the place to post my question, i think it's related… 

I have based on the first code to hide the header when scrolling down and it appears when scrolling up... but I also have an animation of the logo at the top of the page and I don't know how to join the 2.

The sticky header and the logo are in separate divs, although after the first animation they seem together... but I want that when a 150vh of scroll down is done, the header + logo set is hidden upwards, and that they appear again when scrolling up... all always in the area below 150vh from the top of the page...
This is what I have arrived at:

 

Orignal topic 

 

See the Pen poBmoav by lagalga (@lagalga) on CodePen

[ScrollTrigger show/hide Navbar on scroll up/scroll down]

Maybe is it that, but black instead of red?

[Shrink logo on scroll and keep it fixed]

Thanks
I was stuck on doing it with gsap.from and this is simpler 😅

Sometimes you are so deep into something and you don't see that the solution is simpler 

[Shrink logo on scroll and keep it fixed]

Hi! one more twist... is it possible to have an initial logo size relative to the width calculated with css variables* and after the animation the size is fixed in pixels?
I mean:
From-> width: calc(100vw - var(--borde));
To-> width:250px;

 

Thanks

 

[Pin vertical sections with inside horizontal scrooltriggers]

Hi! sorry i've been out and im' seein again now. Gonna try first one, @Rodrigo and simplify my codepen, @mvaneijgen.

I'll post it today or tomorrow
Thank you

[Pin vertical sections with inside horizontal scrooltriggers]

Hi, I am trying to create a group of sections within which there is a horizontal scroll, and when it ends then another new section appears vertically that overlaps.
But if I use sticky it only works the first time?
I'm doing it in wordpress(Divi), but with a simple demo based on @LukasZahorec' I don't get it... should I create a tween above the horizontal scroll sections for the vertical sticky behavior?

 

 

WP: ( https://temp.espaciotramo.com/loop-plato-prueba/ )

 

See the Pen abXgwvJ by lagalga (@lagalga) on CodePen

[Right to left sticky scroll]

Hi, it's me again. I thought I had solved... but it doesn't work on mobile. Also, the 40% section is getting "shorter" because above comes the 3rd section more and more above ....
I have created variables for .panel60 and .panel40 but I don't know if I should create a function for each of them?

Also, in mobile, they should be all full width sections, but the third section is not visible, it only does the scroll trigger with the .panel60 and .panel40 sections....

What am I doing wrong?

 

Updated Codepen:

https://codepen.io/lagalga/pen/OJrvKML

 

 

 

I have this on a wordpress site, with Divi theme:
https://temp.espaciotramo.com/

 

[Animate text on an SVG path]

10 minutes ago, Rodrigo said:

Hi,

 

This is related to the initial position of the characters. Jack's original example has a different setup than the one you actually need in order to spread out the characters in the path.

 

This seems to work as expected:

 

 

 

Hopefully this helps.

Happy Tweening!

Thnk you. I suppose i need to use   instead of regular spaces… and who do i animate this on scrolltrigger, not automatically with hover?

[Animate text on an SVG path]

Yep, sorry. I forgot to mention i need a constant font size, not resizeable with viewport… so if the section is 100vh, the path somatimes would be more horizontal and sometimes vertical… deforming the path, changing the font size and its glyphs proportion (

See the Pen OJrZVwO by lagalga (@lagalga) on CodePen

).

 

So I saw this post and thought i could set a simple path (two perpendicular lines, a corner), where the text moves on scrolling (not animated like this post), but not realizing where to start: 

See the Pen abPGLQb by lagalga (@lagalga) on CodePen

 

[Animate text on an SVG path]

Hi! I'm trying to set something similar but cannot make it with textPath because of svg redimension…

I'd like to animate a text on a simple path on scroll, like this: https://www.dropbox.com/scl/fi/z9phi9hvkg1k415lpypqj/text-animation.mov?rlkey=n2jobltwtkp4fe6hjduw558hi&dl=0

 

Do I have to use SplitText? I've tried forking your codepen but the text gets mixed…

[Right to left sticky scroll]

9 minutes ago, mvaneijgen said:

That is what I thought, so then I don't get what is the issue?

 

That is not a problem, but what I don't understand is if you have a pen that works perfectly, what do you need help with? Is there a Divi issue? That is not really something we can help with, if it works perfectly in Codepen then it isn't a GSAP issue and we like to scope these forums to only GSAP related questions, so the only advise I could give you is try disabling things on the Divi side until things start working, then you know in what code the issue resides and it will be easier to debug.

 

But your links seems to also work and you've marked your comment as the solution? 

Sorry, I solved it while writing it. That's why I marked it as solved. I've been updating CodePen and that's why it looks good. 
Sorry for the inconvenience

[Right to left sticky scroll]

Thnk you, @mvaneijgen, but in my codepen the effect is right. Maybe with duplicated code. Sorry i don't fully understad yet all gsap settings, it's while trying when i'm learning 😅.

I'm setting this for a wordpress site, with Divi, and i've reached this: https://temp.espaciotramo.com/prueba-home/

And updated the codepen: 

[Right to left sticky scroll]

Hi! i want a horizontal scrolling section with sticky cards moving right to left… but then another section with the reverse movement…

I reached to this page:

Where there is the first part, but cannot set the next section with the opposite direction movement… I've tried setting flex-direction:row-reverse, but cannot find what i need to change on the xPercent var…

See the Pen OJrvKML by lagalga (@lagalga) on CodePen