The Hidden Power of Self-Motivation - Articulate Storyline

Hey everyone!

I made a cool e-learning project called "The Hidden Power of Self-Motivation" I used ChatGPT to create the content, and made it interactive with Articulate Storyline. To make it even more fun, I added a little touch of JavaScript. An amazing experience underwater. Check it out now and discover the amazing power of self-motivation!

Project link

Project Process

In general, the most important feature of this project is that the buttons move randomly and work continuously. Another important feature is that fish and bubbles constantly appear and move in a cycle. As you know, there is a timeline in the storyline and it is difficult to show continuous movement unless you use loops or gifs. In this project, I pushed the limits and made the storyline application look like a web page. It may seem easy, but this project took me weeks to make. The most challenging part for me was doing this on a single screen with a scrolling panel. Using a scrolling panel is more difficult than a normal screen, especially integrating move animation into an element. There is a huge difference between the first stages of this design and this one. Let's move on to the project steps;

First you need to add a scrolling panel. To lengthen the scrolling panel, you must add a long rectangle and extend it downwards.

At the top I added the title of the project, the iceberg and the surface line of the sea.

Then you add the items you want to appear on the screen one by one.

Items in the Project;

• Jellyfish gif
• jumping fish gif
• little fish gif
• Buttons
• ovals for bubble
• Sand, stone, crab for the ground...

I added a bubble image inside the ovals to make them look like real water droplets.

As you can see there is a lot of movement on the fish and the bubbles. You need to carry these animations from the bottom of the water to the finish line. It should disappear when the movement is finished. 

I created a loop to ensure that these items run continuously when the project is open. This move works for certain periods of time, and I added a trigger to each of them so that it works again when the animation is completed.

The same goes for my fish gifs. When the animation of the fish in the upper part ends, the fish in the lower part continue to move and move forward.

Our work is still not done :) Now we need to define the codes for our buttons so that they move randomly. The purpose of this is to make them look like bubbles in the water.

var tl = gsap.timeline ()
.to(theObject,{
  xPercent: "random(-7, 7, 3)", //chooses a random number between -20 and 20 
  yPercent: "random(-7, 7, 2)",
  duration:1,
  ease:"none",
  repeat:-1,
  repeatRefresh:true // gets a new random x and y value on each repeat
})

There are two javascript codes, the reason for this is to prevent the buttons from doing the same random movement.

 

When we are done with the Home Page, we move on to layers. There is a layer for each button. We fill the layers and add a trigger to open them when clicked.

Yes, the steps of the project were like this. Now it's time to export. I hope I helped you. Enjoy it :)