Forum Discussion

sameerkamble139's avatar
sameerkamble139
Community Member
27 days ago

Flip animation using GSAP in Articulate Storyline to have smooth flip animation.

We recently faced a challenge with the built-in swirl animation in Storyline (SL). Our client found it cluttered and pointed out that the animation flipped twice, which logically should result in showing the same side again. We agreed with this feedback and decided to explore alternative solutions.

After some research and experimentation, we discovered that using GSAP (GreenSock Animation Platform) provided a much cleaner and more logical flip animation. GSAP allowed us to create a smooth and visually appealing flip effect that only flips once, addressing the client's concerns effectively.

By integrating GSAP with Storyline, we were able to enhance the overall user experience and meet the client's expectations. This solution not only resolved the issue but also opened up new possibilities for creating more sophisticated animations in our e-learning projects.

Hope it will be helpful..

ai assistant
Buttons
Download
Example
Graphics
Icons
rise 360
storyline 360
  • Nedim's avatar
    Nedim
    Community Member
    25 days ago

    Nice example, Sameer! Thank you for sharing. May I just add that you don’t need to use a web object to point to the GSAP CDN in Storyline to load the GSAP library. Instead, you can directly include the GSAP script within your project, as the GSAP library object is directly accessible within Storyline. This will suffice:

    gsap.to("[data-model-id='69xGvaIrkos']", {rotationY: 180, duration: 1});
  • sameerkamble139's avatar
    sameerkamble139
    Community Member
    23 days ago

    This is for the people who does not know how to use it in Articulate Storyline:

    Step 1: Set Up Your Storyline Project

    1. Open Storyline 360 and create a new project or open an existing one.
    2. Add the objects you want to animate (e.g., images, shapes, text boxes) to your slide.

    Step 2: Include GSAP in Your Project

    1. Download GSAP from the GreenSock website.
    2. Upload the GSAP files to your Storyline project:
      • Go to the Insert tab.
      • Select Web Object.
      • Choose the folder where you saved the GSAP files and insert it into your slide.

    Step 3: Write the JavaScript Code

    1. Open the slide where you want to add the animation.
    2. Go to the Triggers panel and select Execute JavaScript.
    3. Write the following JavaScript code to create the flip animation:

    // Select the element you want to animate var element = document.querySelector("#yourElementID"); // Create the flip animation using GSAP gsap.to(element, { duration: 1, rotationY: 180, ease: "power2.inOut", onComplete: function() { // Reset the rotation to create a continuous flip effect gsap.set(element, { rotationY: 0 }); } });

    Step 4: Test the Animation

    1. Preview your slide to see the animation in action.
    2. Adjust the parameters (e.g., duration, ease) in the JavaScript code to fine-tune the animation to your liking.

    Step 5: Publish Your Project

    1. Once you're satisfied with the animation, publish your project.
    2. Share the published project with your client to get their feedback.

    By following these steps, you can integrate GSAP into your Storyline 360 projects to create smooth and visually appealing animations. This approach not only addresses the client's concerns but also enhances the overall user experience.

     

Related Content