scrollToIndex

[reduxdj]

I like your superscrollorama, but I was having an issue with working with scrolling to an index. For instance, I have 5 positioned elements, if I scroll my container and add my content to the container, the calculation for figuring out if an item view is "in view" goes off - due to the measuring logic of the container.

I was hoping to be able to slide and trigger animations with the vertical navigator and then have it work with superscrollorama. Here's my scroll handler that figures out if content is in view.

onScroll: (event) ->
    direction = if $(window).scrollTop() > @currentScrollTop then 1 else -1
    @model.each((item,index) =>
        el = $("##{item.get('elId')}")
        if $(el).offset()
            contentTop = el.offset().top
            scrollTop = $(window).scrollTop() 
            windowHeight = $(window).height() - 100
            contentHeight = $(el).height()
            lowerBound = (contentTop) - windowHeight 
            upperBound = contentTop + (contentHeight)
            percent = ((scrollTop - lowerBound) / (upperBound - lowerBound) * 2) * 100
            if percent > 80 and percent < 100
                @$el.find('.dot').removeClass('active')
                @$el.find('.dot').eq(index).addClass('active')
                if item.get('backgroundColor')?
                    @setBackgroundClass( item.get('backgroundColor') )
                else
                    @setBackgroundClass( '#000000')

            else if percent>200 and percent<175
                item.set(percentage:percent)
    )
    @currentScrollTop = $(window).scrollTop()

My question is how, do I maintain scrolling an animation with a navigator view, like above scroll to a specific animation, a handy scrollToElement or scrollToTimeline would be handy - which would animate the scroll position and trigger the animation.

Also, figuring out offsets for this behavior is a little confusing. I get different results with different values, I am setting up a container, with "slides" per say. each slide will have sub animations and be "pages"

tweens = []
tweens.push( TweenMax.fromTo("##{id} .inner-slide",Math.min(1,index*0.18+0.5), from, end ) )

        if index isnt 0
            controller.addTween(".slide-container", timeLine.append(tweens),0,offsetHeight-($(window).height()-100))
        else
            timeLine.append(tweens)

[jkrot]

I had a lot of issues scrolling through animations when pinning them. You can see the relevant conservation with #99

You can see me using the pinning of the animation on http://optimine.com/

I believe I have noticed a similar issue as you.

#105

Moving around the page doesn't always end the animation in the same state so it is hard to correct for it.

[janpaepke]

Hi redux,

did Jasons answer help you or is this issue still unresolved?

regards,
Jan