Jump to content
Search Community

how to end pin on last section display

renny test
Moderator Tag

Recommended Posts

Hey @renny,

 

Sure thing,

 

You'll just have to write some conditional logic to check if it's the last panel.

Hope this helps

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 

let panels = gsap.utils.toArray(".panel")

panels.forEach((panel, i) => {
  
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: i === panels.length -1 ? false : true, 
    end:"bottom 100",
    pinSpacing: false 
  });
});

 

  • Like 1
Link to comment
Share on other sites

this script work well into home page, but not working into another page mobile view 

let scrollAnim1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".image_expand",
     start: "top",
   end: "bottom",

    scrub: 1,
    pin: true
  
  
  }
});

scrollAnim1
  .fromTo(
    ".kitty",
    { clipPath: "inset(0% 22%)" },
    {
      clipPath: "inset(0% 0%)",
      duration: 1.5
    }
  )
 

Link to comment
Share on other sites

@renny I don't really understand your question - we can't troubleshoot live web pages, so if you need some help please provide a minimal demo with only the essential code to reproduce the issue (please don't include your whole web page - just isolate the issue in a minimal representation with basic <div> elements for example). A simple CodePen would be perfect. 👍

Link to comment
Share on other sites

could you try codeSandbox instead @renny?

I can't load the link you added here and that snippet you've added doesn't look to be doing anything too complex. I don't see any reason why a little clip path tween would be causing 'code conflicts'.

I'm afraid we can't help without seeing a demo.

 

Link to comment
Share on other sites

Sorry Renny - I really don't know what to look for.

I'm not even sure where the about us page is - there's no about us link anywhere.

 

Could you please explain exactly how to replicate the issue? Step by steps lists or screengrabs are useful. Talk us through the problem.

Link to comment
Share on other sites

 

Ok, I see!

So firstly this isn't a page transition issue - this is purely about the animations happening on the about page on mobile view. So there's no need for a codesandbox of this size to debug it.

Some steps.

1) Take everything out of this codesandbox apart from the code needed for the about page.

2) You have a lot of errors in the console currently. Focus on sorting those out first because you're likely tweening something that doesn't exist.


Screenshot 2021-11-09 at 14.06.47.png
Once you've narrowed the code down it'll be much much more clear where the issue is.

As a general rule if you're only using certain animations on certain pages it's good practice to check to see what page you're on and then run that code, rather than run loads of JS that is looking for elements that don't exist, as that will error and potentially cause issues.

Something like this should work...
 

if ( document.URL.includes("about") ) {
    //about us code here
}

 

  • Like 1
Link to comment
Share on other sites

  "(max-width: 767px)": function() {


let sections = document.querySelectorAll(".activities_sec .image");
let scrollContainer = document.querySelector(".activities_sec");

let scrollTween = gsap.to(sections, {
  xPercent: -110 * (sections.length - 1),
  ease: "none"
});

let horizontalScroll = ScrollTrigger.create({
  animation: scrollTween,
  trigger: scrollContainer,
  pin: true,
  scrub: 1,
  end: "+=1000"
});

// total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. 
var dragRatio = scrollContainer.offsetWidth / (window.innerWidth * (sections.length - 1));
var drag = Draggable.create(".proxy", {
  trigger: scrollContainer,
  type: "x",
  onPress() {
    this.startScroll = horizontalScroll.scroll();
  },
  onDrag() {
    horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * 1);
    // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line:
    //horizontalScroll.getTween().progress(1);
  }
})[0];

  },


if i remove this script then all animation working perfectly 

Link to comment
Share on other sites

Hello again!

 

51 minutes ago, renny said:

this condition is not a right solution, because that animation will use into many pages

I wasn't suggesting that snippet was the answer - more that the approach itself would help you.

The code you've removed shouldn't be running on the about page, the elements that it's targeting don't exist, that's where your errors are coming from.

You don't need to remove it though, just work out which pages it needs to run on and then make sure it only runs on those pages.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...