Jump to content
Search Community

Horizontal Timeline Multiple Video

Sukru test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!


Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Link to comment
Share on other sites

By the way, this is definitely wrong: 

gsap.utils.toArray(".video").forEach(text => { // <- did you mean "video" instead of "text"?
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      containerAnimation: scrollTween,
      trigger: text,
      start: "-50% 45%",
      end: "150% center",
      markers:true,
      onEnter: () => video.play(), // <- there is no "video" reference
      onLeave: () => video.pause(),
      onEnterBack: () => video.play(),
      onLeaveBack: () => video.pause(),
    }
  })
});

I assume you meant to define your looping element reference as "video" instead of "text"? But also, you've got the "video" class applied to regular <div> elements, not just <video> elements, so that looks wrong too. And you've got multiple video elements with the same id which is invalid markup. 

Link to comment
Share on other sites

Thank you @GSAP Helper it worked with your method, but it gives the following error "Uncaught TypeError: video.pause is not a function" Is it possible to edit this without any error in Codepen? I changed the outside div to "<div class="video-box">" and it worked.

 

gsap.utils.toArray(".scale").forEach(text => {
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      containerAnimation: scrollTween,
      trigger: text,
      start: "left right",
      end: "left left",
      scrub: true
    }
  })
  .fromTo(text, {scale: 1}, {scale: 1.4}, 0)
  // .from(text.nextElementSibling, {scale: 0.8}, 0)
});

 

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...