Jump to content
Search Community

Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"

bootstrap007 test
Moderator Tag

Recommended Posts

Hi All,

I know this might be very simple question for most of you to answer. But I couldn't find any proper answers from the search. The issue is that I am getting "Uncaught SyntaxError: Identifier 'tl' has already been declared" error If I have multiple timelines. How to fix it?

 

 

The below is the code: 

 

gsap.registerPlugin(ScrollTrigger);

let container = document.querySelector(".portfoliomob");
let tl = gsap.timeline({
  scrollTrigger: {
    pin: true,
    scrub: 1,
    scroller:'[data-scroll-container]',
    trigger: container,
    end: () => container.scrollWidth - document.documentElement.clientWidth
  },
  defaults: { ease: "none", duration: 1 }
});

tl.to(".parallaxhead", { x: 300 })
 tl.to(".panelmob", { x: () => -(container.scrollWidth - document.documentElement.clientWidth) }, 0)
  tl.from(".secondAn", {
    opacity: 0,
    scale: 0.5,
    duration: 0.2,
    stagger: {
      amount: 0.8
    }
  }, 0);

tl.from(".firstAn", {
  duration: 1,
  opacity: 0,
  scale: .5,
  scrollTrigger: {
    trigger: container,
    start: "top 90%",
    end: "bottom 10%",
    toggleActions: "play none none reverse"
  }
});

See the Pen dyRyYWg by bootstrap007 (@bootstrap007) on CodePen

Link to comment
Share on other sites

You are using the name tl twice in your code in the same block-scope. Just use a different name for the second one.

 

let tl = gsap.timeline({
  scrollTrigger: {
    pin: true,
    scrub: 1,
    trigger: container,
    scroller:'[data-scroll-container]',
    end: () => container.scrollWidth - document.documentElement.clientWidth
  },
  defaults: { ease: "none", duration: 1 }
});

// use a different name
var tl = gsap.timeline();

 

See let documentation for more info. You can use the same name, just not in the same in block-scope.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

OSUblake  One more question on this topic. How to control the speed of each slides/images? In the codepen demo the speed looks perfectly fine. But when I added this to the project then all the images/slides are sliding away on a single scroll. Any solutions for that? Possible to slow down the sliding speed on scrolling?

Link to comment
Share on other sites

You would just add the invalidateOnRefresh to your scroll trigger.

let tl = gsap.timeline({
  scrollTrigger: {
    pin: true,
    scrub: 1,
    trigger: container,
    scroller:'[data-scroll-container]',
    end: () => container.scrollWidth - document.documentElement.clientWidth,
    invalidateOnRefresh: true
  },
  defaults: { ease: "none", duration: 1 }
});

 

And then if the layout changes, you would call refresh.

ScrollTrigger.refresh();

 

 

  • Like 3
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...