joe.cardella

Zach - THANK YOU SO MUCH! THAT WORKED! I appreciate the added recommendation of position 0 on the second timeline. Have a great day and take good care.

To get the code to work there is a white SVG named centerwill need to be clicked on. This will be replaced with a play icon, and be swapped out with a pause icon to pause once the dragging works properly.

To activate the SVG animation, click the white center SVG. To pause the video, click the native pause button in the html video (sorry still under dev).

I have an SVG circle that is a progress bar for the progress of a video's duration named progressCircle. There is another SVG circle that is named vidControllerand it is draggable. vidController is used to update the currentTime of the video.

Video of what I'm talking about: https://tog-video-shopify.s3.amazonaws.com/svg-anim.mov

I have a Timeline named tl_1  and this is responsible for updating the position of the vidController and the progress of progressCircle.

When I pause the video (in the video's native pause button), the progressCircle and vidController stop at the correct position. When I start another drag on the vidController, I expect it to smoothly drag from where it was stopped. However, it is jumping several degrees forward. If I drag it back, it jumps forward erroneously as well.

How can I get the animation to not jump and smoothly start where it left off? 

See the Pen LYYepar by jcardella (@jcardella) on CodePen

I had to play around with my main element and body element's overflow property to fix.

Guys

I have a problem where I am using the scrollTo plugin and it does not scroll at all on iOS 10 in Safari, Firefox, and Chrome at all.

As a test to see if this problem could reproduced outside my code base, I loaded up http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/ in iOS 10 and the codepen example on that page also fails in iOS 10 works fine on Desktop browsers.

Any ideas what is going on? Are you aware of this issue?

The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to?

The solution would be to create the timelines outside of the click event and then based on the state, get that instance of the timeline and play forward or reverse the animation.  

Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.

Here's the code:

// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})

// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})

// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})

// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)

// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}

I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?

http://stackoverflow.com/questions/38440731/greensock-animation-platform-is-it-possible-to-reverse-nested-timelines