Looping slider from Left to Right

scrolling

(Dhiren SHAH) #1

Hello,

I am trying to achieve looping slider from Right to Left with in the specific area. I was able to mask the specific area but the not able to get the seamless continues loop. I hope without Javascript it possible.

loopScroll.zip (149.3 KB)

Thanks in advance.


#2

something like this?
loopScroll2.zip (146.8 KB)


(Dhiren SHAH) #3

Hello Djon,

Thanks for your efforts, but this is not seamless loop. Did you see the gap between E & A, that’s what I want to solve it.


#4

Hi dhiren!

I do have time for this - something I know (as opposed to the CSS fonts).

Demo Project: loopScroll_JHSv1.hype.zip (149.7 KB)

The actual loop transition point is a little glitchy in this Demo - something that can be refined to your needs; but the principle is shown here:


• Tagging on a couple more elements, “Aa” & “Bb” (which are “A” & "B"copies), to the end of the group.

• When the timeline hits the spot where “Aa”~“Bb” are both in the rectangle mask jump back to the point in the timeline where “A”~“B” are in the rectangle mask in the same left position. So if “A”~“B” are both in the mask at 3 seconds and “Aa”~“Bb” are in the mask at 7 seconds, have a timeline action “Go to Time in Timeline” at 7 seconds that jumps back to the 3 second mark.

This will take some tweaking so the speed of the movement (frame to frame) will allow the same location in the rectangle mask for both “A”& “B”. Adjusting the width of the mask might also play a role it getting it to work smoothly.

Also I just noticed the animation in the Demo has an “Ease In Out” timing. You would probably want to set this to “linear” instead. This adjustment will change the current synchrony of the animation. So make sure You select the timing function You want to begin with.


(Dhiren SHAH) #5

Hello JimScott,

Yes, this is working for me. I can do the rest of tweaking.

Thanks a lot.


#6

You guys doing well, but maybe too complicate. See this one :slight_smile:
loopScroll_Simple.hype.zip (150.3 KB)


#7

Smart!


#8

@uedvincent

Not clear what the difference is with our solutions. Both employ an extra set of “A” “B” frames that then loop back to a particular place in time. The one thing with your solution is it starts with the frame in the masking rectangle. In my version the rectangle is blank to start as per @dhiren’s original example.


#9

Hi Jim
Basically it’s a same idea, problem is you add some useless actions. I just want the timeline clean.:grin:


#10

@uedvincent

Oh.

Let’s see - in mine I had 2 timeline actions:


Action #1 to start the animation.
Action #2 to loop it back to a matching point earlier in the Timeline.


Which action was useless? You had the same number of actions doing exactly the same thing.


#11

@JimScott
Hi.
Action #1 is Unnecessary. Actually if you let the Action #2 trigger “loop” timeline start from the beginning, things will be more clear, and it’s easily to align those elements.
By the way, maybe my English expressions is not native, if I made you feed uncomfortable please forgive me ~:stuck_out_tongue_closed_eyes: