Forum Discussion

YoshieKellogg-B's avatar
YoshieKellogg-B
Community Member
4 years ago

Documentation for GSAP in Storyline 360

I need documentation on implementing GSAP in Storyline 360 to animate objects on a slide, with specific How-Tos with use cases. I do not want a link to a forum. I need documentation.
storyline 360
RobertDuncan-84's avatar
RobertDuncan-84
Community Member
4 years ago

Hi  there guys,

I'm not sure whether this is the right spot to post this issue but here we go...

I'm not a coder by any stretch but having the ability to use GSAP in courses takes content and design to the next level... However I seem to have hit a snag 

  • The course slide  is set to "Scale existing content to fit"
  • I've added this snippet of code to trigger on entering a slide
  • var tl = gsap.timeline({repeat: 0, repeatDelay: 0, delay:0});

    tl.fromTo("[data-acc-text='Cover1']", 1, {y:0, left:0, top:0, opacity:0, duration:0}, {y: 116, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay: -1.0, immediateRender:false}, 1);
    tl.fromTo("[data-acc-text='Cover2']", 1, {y:0, left:0, top:0, opacity:0, duration:0},{y: 114, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay: -1.0,immediateRender:false}, 1);
    tl.to("[data-acc-text='Cover2']", {rotation: -5, duration: 1.5, ease:"back.out", repeat:0, delay:-1.0});
    tl.fromTo("[data-acc-text='ReadMorePlus']", 1, {y:327, scale:0, opacity:0, duration:0}, {scale: 1, opacity:1, y:0, rotation: 360, duration: 1.5, ease:"back.out", repeat:0, delay:0,immediateRender:false}, 1);
    tl.fromTo("[data-acc-text='Button1']", 1, {y:576, opacity:0, duration:0}, {y: 414, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay:0,immediateRender:false}, 1);

    gsap.to("[data-acc-text='ReadMorePlusPulse']",{duration:2.0, alpha:0, scale:1.5, ease:Power4.inOut, repeat:-1, repeatDelay:2});
    gsap.to("[data-acc-text='ButtPulse']",{duration:2.0, alpha:0, scale:1.5, ease:Power4.inOut, repeat:-1, repeatDelay:2});

The issue being as I'm sure you've guessed is that the x and y coordinates get ignored when the browser resizes. Any ideas as to a solution for this..?

Thanks guys