Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'foreach'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. Hi, I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided). I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page. So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour. In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire. Does anyone know what is happening? Or what the best solution would be? P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like. P.P.S Any help would be hugely appreciated. function sliders () { var timerbar = document.querySelectorAll(".timerbar"); var tl1 = new TimelineMax({repeat: -1}); tl1 .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone}) .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2) .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2) .to(timerbar, 0, {scaleX: 0}) .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone}) .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2) .to(".js-stagger-1", 0, {y:30, opacity: 0}) .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2); } // sliders(); // FOREACH TRIGGER ON TEXT SLIDES var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger'); function scrollTrigger() { triggerBox.forEach(function(item){ var boxPosition = item.getBoundingClientRect().top; var boxPositionPercent = (boxPosition / window.innerHeight) * 100; if (boxPositionPercent <= 100) { // 100% equals bottom of viewport sliders(); } else { // somehow kill the function } }); } window.addEventListener("scroll", scrollTrigger);
×