Scrollsequence Watch Example Tutorial

hello and welcome to the scroll sequence watch example tutorial uh where we're gonna take a look on how to create a scroll controlled animation in this case it's an animation of a watch that is rotating as you scroll up and down the rotation changes and this is achieved by basically having a series of images that are displayed according to the scroll position so let's get started first step is to download the image pack just click on the download link and once it's downloaded you're going to see that it consisting of a number of images that we're going to use for the animation um just head over to the media library click on add new and drag and drop the images to the gallery the images will start to load one by one wait for all the images to be uploaded and processed and once it's done then click on scroll sequence add new you will be taken to the main menu always start with entering the title first watch example tutorial if you don't enter the title there can be a problem with saving your work so always start with title first next add on add scene scroll sequence can consist of multiple scenes you can add them by pressing plus button rearrange them as you want but for the example we're going to use just one scene so let's delete the other ones then click on select attachments select the first one press shift and then select the last one that you want to use in the animation and click on use attachments this will add the attachments to the scene and number them the numbers are useful for animation we can animate the fixed content this is the content that is displayed in front of the animated background and we can control the animation here there are three main parameters for each animation one is selector which defines what we're going to animate and then there is a start and end frame the start and end frame is the number of the image so let's say that we want to animate the heading from frame 0 to frame 30. the next thing that we need to do is to define what what what is the heading the hashtag defines a id and a dot defines a class it's a css rule so in this case we're going to use the heading the id with heading so let's go to the editor into the visual text editor id heading then further down here there are some other settings like image duration in pixels that's when you when the user will be scrolling on the page every 25 pixels there will be a new image displayed we can change it to 10 which will make the animation play faster and appear smoother then there are some settings for mobile and desktop we're going to leave them as they are for the time being but notice that scale to fill means that the image will be scaled to fill the whole area of the screen for both mobile and landscape view okay so let's take a look so we've published we're going to view in a different window so we can see that the first image is visible the content is visible and once we scroll through the content is displayed for the first 30 images and then it disappears then the animation continues also notice that the image is full screen if we change to mobile display is always stretched so it fills the screen fully um to demonstrate the difference i'm gonna show and put it to fit to eighty percent on mobile and fit to eighty percent on desktop uh and we wanna align it uh so it's towards the bottom right so let's align it to the bottom right on the desktop and on the mobile on the mobile we want to have it center so let's have it center on the mobile and on the bottom on both okay and and then in fact let's let's put it 100 scale to fit 100 that will make sure that the image is fit to the 100 of the width of the page now let's click on update i'm going to open it again in a new new window so we can see the difference so now the image is scaled to fit inside the window and it's towards the right and to the bottom once we scroll the animation place on scroll so what we're going to do next we would like to change the background to white so the background is changed here we select white color and we want to change the text and do some other animations with the with the text so let's change this to watch example and let's copy it and do a subheading we also will be applying some styles to position the content i'm just gonna copy and paste and we're gonna remove the container because we don't want to we don't want to center the content we want to apply just the stars that are for the heading and for the subheading for the subheading we're going to just use a lorem ipsum test text and because we've deleted the center center class so the custom css is no longer required let's hit update and let's take a look how it looks on the front end and here we see that the position has changed as per the css that we've entered the background is now white and as we scroll down the animation place as we've defined so we've defined that the heading is visible only for the first 30 frames and the subheading is visible all the time um so what we're gonna do next we're gonna animate the heading and the subheading so it comes in from the right and then it disappears after let's talk about the animation settings so let's start with animating the heading it's going to start from the zeroth image it's going to end almost all the way so let's say 109 from animation defines what happens near the start and to animation defines what happens near the end so near the start what we want what we want the animation to do we want to move from the horizontal offset over the period of 30 frames and the two animation what we want to do we want to again move to horizontal offset let's say -10 and we want for it to fade to fade out and we want duration 35 images so once again near the start is the from animation we want to move the heading and move it from the horizontal offset and it's going to take 30 frames near the end and is the two animation and we've got we're going to move to horizontal offset of -10 over 35 images and we're also going to fade it to zero opacity so let's take a look so if we scroll down headings moving to the left over the first 30 images then it's going to stay and then the last 35 images is going to fade out and move slightly because there was a horizontal movement defined okay so let's do something similar for the second for the subheading so we can just copy the existing one say that this is subheading this time and for the subheading shall we make it the same let's make just a small change here hit update it's this one here now both should move together and fade out together okay so that's it i'm gonna teach you one last little trick uh we so far we haven't used the content editor um so the content editor is what you're used to let's find some lorem ipsum text and demonstrate we're going to paste some text here and we're also going to paste a heading say this is the heading actually let's use a different word than heading this is the topic let's hit save now we see that the content is at the very bottom but we can change that we can change that quite simply by inserting the short code and we can for example put the scroll sequence at the end so first there will be the text and after that there will be the animation let's have a look so first is the content and then there is the animation so this is just a little trick of how to insert the animation anywhere you want you basically use the shortcode and wherever you put this short code it's going to display the animation if you're putting the short code in another post you need to mention the id parameter and the id is shown here so if you were to insert the scroll sequence into another post or or a page or anywhere else don't forget to use the id okay so that's it for today let me know what you think if you have any any other question or any comments let me know okay bye

Channel: Scrollsequence Scroll Image Animation Plugin

Views: 3,133

Keywords: wordpress, wordpress animation, scroll animation, scroll image animation, image sequence on scroll, plugin, wordpress plugin, freemium

Id: Rbsw2Nwn4VY

Length: 14min 42sec (882 seconds)

Published: Mon Mar 22 2021