#scroll effects

This is a cool scroll progress animation, where a line based logo is highlighted as you scroll down.This could be used to animate the logo as a user scrolls down on your site. Designed by  Chris Coyier

We'll take a breather from your regularly scheduled ReactJS lesson to talk a bit about ScrollMagic and GSAP.

Recently, I was tasked to build an animated storyline for a student's Journey through Fullstack Academy (it is best viewed in Chrome on a Desktop). While I could have used animate and vanilla JQuery to build it, I am lazy, so I spent a good chunk of a week doing research into which technologies and libraries would make my life easier. After testing a bunch of different options, I stopped at ScrollMagic and GSAP. These two libraries are super timesavers!

ScrollMagic, according to its website, "is a scroll interaction library." It came after Superscrollorama and was completely rewritten. It allows you to easily handle how the page interacts with the user's scroll position. It saves you a ton of time and makes things such as parallax effects much easier to do than it would be in vanilla JQuery. The team at ScrollMagic recommends to handle animations with ScrollMagic, but you can do without a framework entirely as well by animating simply using CSS and class toggles.

In my case, I thought GSAP was extremely clear and easy to use, especially to tween and timeline animations, so I opted to go that way. GSAP is a bundle of tools for animating in JavaScript. The two that I used were TweenMax and TimelineMax. TweenMax handles the tweening of just about any property of any object. Tweening is the process of generating intermediate frames of between two stopping points of an object to show the smooth transition of the change. TimelineMax is a sequencing tool to precisely handle timing of the tweens in relation to one another.

Please take a look at the Journey through Fullstack Animation here and give the libraries a try.

THEME 02 Preview // Download Features:

Four columns

Optional clipart

Ribbon border at top that go through middle of posts

Adjusts to any window size

Header with description and links

Hover effects on posts (like/reblog)

Scroll effects

How To Change Your Website’s Background Image Using Scroll Effects in Adobe Muse

  In this episode of Adobe Creative Cloud TV I answer a Facebook Fan request on “how did they do that?” Specifically what he wanted to know how to do was the Full Screen Slideshow Scroll Effect seen here on a recent Adobe Muse “Site of the Day.” I was curious myself and I took the approach of “how would I do that” if I wanted to do it for my own site? In the video below you’ll see my approach…

Hello everyone,

Today is the start of my Adobe Muse tricks and tips tutorials, which I hope to be posting once a week.

I’m starting off with ‘Sticky’ headings: a simple but effective way of displaying headings for sections of your page content. As the page is scrolled up, the section headings stick themselves to the top of the page until the next section reaches the top, and so on. To do this, we’ll be using the Scroll Effects in Muse. I’m going to use a very basic page to demonstrate the technique but the steps are the same for any complexity of layout. 

Let’s get started.

  I’m beginning with a new site here, note the Minimum Height setting has been increased to 1500px. This is to accommodate the amount of space needed for the scroll effects. This can also be adjusted in the Design View by dragging the Bottom of Page Guide down, or simply by adding elements to the content area, where Muse will push the footer area down for us.

  Normally, we’d define the header and footer using the Master Page but as this is a simple example, we’ll jump straight onto the Home page and open it in Design View by double-clicking the page’s thumbnail in the Plan View.

  Here’s our page, with not a lot on it. We’ll use styled text frames for our headings, so we’ll start by grabbing the Text tool (keyboard shortcut: T) from the Toolbox. Click and drag a frame from the left edge of the content area, over to the far right of the content area. Don’t worry about the vertical position or the height for now, we can adjust them later.

  For simplicity, I’m using the text Heading and the heading number. Not very original, I know, but it gets the point across. The text is far too small, of course. We’ll fix that in a moment.

  Now we’ll set the styling for our headings. Switch to the Selection tool (keyboard shortcut: V). This should automatically select the text frame but if not, click inside it. We can see the currently active object on the left of the Control Strip.

  We’ll start off with the text frame's Fill colour. This can be set either from the Fill Settings on the Control Strip, or from the Fill panel. I’m using shades of orange here, since they’re in a convenient order in the Swatch panel.

  Now for the text. Go to the Text Options on the Control Strip, or use the Text panel. Again, we’ll keep things simple, so we’ll keep the default font of Arial. We’ll need to make it larger, of course. A point size of 60px should suffice. We’ll leave the colour as black.

  We’ll shrink the frame a little by clicking and dragging the frame's bottom-middle handle up. I’ve set it to 86px here. Now move the frame up to meet the Header Guide. We can click and drag until it snaps into place, or use the Up Cursor Key to nudge it – holding the Shift key increments it by 10 pixels at a time.

  Before we move on, we need to make sure that the headings will appear above the rest of the page content. The best way to do this is to place them on a separate layer. Go to the Layers panel. Click the New Layer icon at the bottom of the panel.

  Right click on the text frame, or go to the Object Menu. Select the Move to Layer menu item and click Layer 2. Our text frame has been moved to the new layer; its frame border changes to reflect the label colour of the layer, red in this case.

  Now we can define the movement for the frame, which, since this is the first heading, won’t actually be moving at all. Open the Scroll Effects panel. Select the Motion Settings – this is the first option denoted by three cascading circles. Change both values for Initial Motion to 0. Set the Key Position to 0 (the top of the page). This can be done by either dragging the T-handle or by typing the value into the field. Set both values for Final Motion to 0 as well. This anchors the frame in a fixed position at the top of the page.

  Now we’ll add some content to the page. Go back to the Layers panel. Click Layer 1 to make it the active layer. This will make sure the content sits beneath the headings. I’ve created a new text frame and filled it with placeholder text, just so we have some substance to show off the effect. The point size is 30px here.

  To speed things up, we can duplicate the heading and content frames. Grab the Selection tool. Click the text frame we just created. Hold down the Shift key and click the heading frame. This selects both elements at the same time. Now go to the Edit menu and select Duplicate. We now have a copy of both objects; Muse offsets them slightly to make it easier to move them. If we open up the layer contents in the Layers panel we can see that Muse has retained the layer structure with the headings on Layer 2 and the text frames on Layer 1.

  Double-click the new heading frame to make the text editable. Change the 1 to 2. Grab the Selection tool again. Now change the heading's Fill colour to the next shade of orange in the Swatch list.

  We need to alter the motion settings for this heading, as we need it to move up as the page scrolls. Go to the Scroll Effects panel. Change the Initial Motion value to 1 px vertical, this will scroll the frame at the same speed as the rest of the content. Leave the Horizontal Movement at 0. Since we duplicated the first heading item, there’s no need to adjust the Key Position, as it will stop in exactly the same position, once it reaches the top of the browser. If we had created the object from scratch, it would have been necessary to work out the position by subtracting 62px – the distance between the position of first heading item and its Key Position – from the second heading’s position . Again, we need to leave both values for the Final Motion at 0 to stick it in place, once the Key Position reaches the top of the browser.

  Make a couple more duplicates of both the second heading and content frame as we did before – you can use the keyboard shortcut of Cmd+Opt+Shift+D (Mac) or Ctrl+Alt+Shift+D (PC) to speed up the process further. Change the text and colour, then move them into position down the page (shown here zoomed out to the full page). The correct Scroll Motion settings will be copied as before, so there’s no need to adjust them.

  Go to the File menu. Select Preview Page in Browser. All being right, as you scroll the page, the headings will scroll up and stop when they reach the first heading, stacking up on top each time – this doesn't translate well in a static image!. We can see the text scroll past the heading here but ordinarily that would be hidden by the navigation menu or another page element.

 That’s the basics of using Scroll Effects to create stacking headings in Adobe Muse. Give it a try with your own sites.

Until next time. Take care!