Scrolltrigger start and end position with a variable

[alessiopaoletti]

Hi,

I need to have the start and the end position in a precise point like this "top 500px" but for the px value I have a calc and a variable that return "top 500px" or "bottom 500px" but doesn't work the bottom value, why?

Here is my code:

var view_h = (($(window).height() - (header_h + footer_h)) / 2) + header_h;
var val = Math.round(view_h); // es. 500px

var top_centered = "'top " + val + "px'";
var bottom_centered = '"bottom '  + val +'px"';


var seconda_slide = gsap.timeline({
	scrollTrigger: {
		trigger: ".intro.chi-siamo",
		start: top_centered,
    		end: bottom_centered,
		scrub: 1.5,
		markers: true,
	}
});

 

[GSAP Helper]

Hi there, could you explain what's not working and provide a minimal demo?

 

It's pretty tough to troubleshoot without that - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[alessiopaoletti]

See the Pen xxQgYLJ?editors=0010 by alessio-paoletti (@alessio-paoletti) on CodePen

 

As you can see, the end position it's in top and not at the bottom of the trigger.

this is the demo, the problem is this, I have the container decentrated but i need when it's in full view the progress of the animation at 50%,

this problem it's correlated to an animation of elements inside a svg, I used fromTo because I need to create a parallax animation that when entry it have a transition from bottom to it's original position when it's in view, and then a transition from original position to top when the scroll go down.

 

the website in building

  https://punctum.studio/preview/sitaricerca/ 

[mvaneijgen]

I've changed your code from to just include one type of quotes and everything works as expected.

 

// Orignal
var top_centered = "'top " + val + "px'";
var bottom_centered = '"bottom '  + val +'px"';

// Working
var top_centered = "top " + val + "px";
var bottom_centered = 'bottom ' + val + 'px';

// More readable version
var top_centered = `top ${val}px`;
var bottom_centered = `bottom ${val}px`;

Personally I like the last one better, makes code more readable. Hope it helps and happy tweening! 

[Cassie]

Just adding to this - the way that you're calculating the trigger points seems a bit overcomplicated to me - it's also not going to refresh if the browser gets resized which may cause issues.

Would you be able to explain to me what you're trying to achieve? Maybe I can find you a better code solution?

[alessiopaoletti]

Later I would add a function to update the value in case of resize,

anyway this is the reference site:
https://koox.co.uk/

 

my site: 

https://punctum.studio/preview/sitaricerca/

 

I don't know how they did it, I'm trying to reproduce this effect using gsap, I have svgs with elements inside to move from the bottom to the starting position when the section is in view, and from the starting position to the top when scrolling to next section, so I'm using Scrolltrigger and fromTo.

[Rodrigo]

Hi,

 

The site you shared (KOOX) seems more like a job for the Observer Pplugin:

https://greensock.com/docs/v3/Plugins/Observer

 

Here is an example:

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

If you want to use ScrollTrigger though, you could use the onToggle callback in combination with the ScrollTo Plugin as shown in this example:

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[alessiopaoletti]

For the slide I had used a snippet of code of a codepen demo with scrolltrigger and scrollTo:

 

let sections = gsap.utils.toArray(".scroller-sections"),
scrollTween;

function goToSection(i) {
  scrollTween = gsap.to(window, {
    scrollTo: {y: i * window.innerHeight, autoKill: false},
    duration: 1,
	ease: "expo.out",
    onComplete: () => {
      scrollTween = null
    },
    overwrite: true
  });
}

sections.forEach((section, i) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top bottom-=1",
    end: "bottom top+=1",
    onToggle: self => self.isActive && !scrollTween && goToSection(i)
  });
});

 

the problems are for the animations that are different for each slide and the elements (inside svg) if you see here https://punctum.studio/preview/sitaricerca/  are positioned with transform or matrix and y or x doesn't work well.

[Rodrigo]

Hi,

 

If you have animations in your sections or slides, then just add your animations to a timeline with ScrollTrigger in it and after you create all your animations for your slides/sections, create the ScrollTrigger instances for toggling the sections as in the example.

 

Another option could be use the onEnter and onEnterBack callbacks to trigger the goToSection method with some custom logic to accommodate the accurate scroll position.

 

Unfortunately I ran out of time to create a custom example, I'm really close but there are a few details left. Hopefully you can beat me to it and I'll dig into this again tomorrow.

 

Happy Tweening!