[Draggable/Scrolling div - How to create an anchor tag/auto scroll]

I noticed you had little notches in the knob, so just updated the codepen to implement snapping so that when you spin the knob or drag the content, it'll snap to the sections. It's easy to remove if you'd like - just delete the "snap" property for each Draggable. 

 

See the Pen gnoDc by GreenSock (@GreenSock) on CodePen

 

It was kinda fun to do

Thanks for your help, I too had fun messing around with this little project

[Draggable/Scrolling div - How to create an anchor tag/auto scroll]

I still cant get it to work, Ive attached my files...

 

PS: the problem lies with the rotating knob functionality, it should scroll the content div notice line 105

Archive.zip

[Draggable/Scrolling div - How to create an anchor tag/auto scroll]

Hi,

 

Perhaps you could give this a look:

 

See the Pen xiAnD by rhernando (@rhernando) on CodePen

 

As you can see is a very simple example of how you can use the scrollTo Plugin with Draggable. Please feel free to fork it and adapt it to your scenario.

 

Anyway what I think could be the problem is that you're pointing the scrollTo plugin to the content element and not the parent, remember that the parent element is the one with the overflow property, not the content. Also to make it more consistent the Draggable instance's type should be "scrollTop", like that both GSAP instances (scrollTo plugin and Draggable) will work on teh same element and the same property.

 

Rodrigo.

Thanks! Thats exactly what im looking for

[Draggable/Scrolling div - How to create an anchor tag/auto scroll]

Hey guys, ive a div that has scroller functionality with the Draggable plugin. Im creating a menu with buttons to autoScroll the scrollable/draggable area. How does one animate the scroller area on a button click?

Ive tried:

TweenLite.to([Draggable.get("#content")], 1, {y:50});

TweenLite.to([Draggable.get("#content")], 1, {scrollTo:{y:50}});

TweenLite.to(content, 0, {scrollTo:{y:100}});

TweenLite.to(content, 1, {y:50});  <------This animates the whole scrollable area, I just want to animate the content

 

Any help would be greatly appreciated! Go greenSock team! Using the GSAP platform sure beats CSS animation!!

[How do I access a function from a child SWF?]

try adding another .parent or 2. I didn't realize that your container was nested 2 levels down.

 

container:contentLoader.scene0

 

also, maybe resetSlide shouldn't be private. don't know.

 

Thanks! Making the function public made things happen. Thanks again

[How do I access a function from a child SWF?]

try this in your child swf:

 

 

var parentMovie:MovieClip = this.parent.root as MovieClip;
//parentMovie.onParentFiredFromLoaded();

parentMovie.myFunction();

 

ps. i deleted the duplicate of this question in the other thread. no worries.

 

Thanks for the snippet, but it doesnt work for me. Heres my code, im trying to hit "resetSlide" from a sub SWF(contentLoader is a movieClip on the stage that im loading everything into):

 

package
{
import flash.display.MovieClip;
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([blurFilterPlugin,TintPlugin, GlowFilterPlugin]);import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;

public class container extends MovieClip
{
 var queue:LoaderMax = new LoaderMax({name:"mainQueue",onComplete:completeHandler});

 public function container()
 {
  init();
  queue.append( new SWFLoader("slide_0.swf", {name:"scene0", estimatedBytes:3000, container:contentLoader.scene0}) );
  queue.append( new SWFLoader("slide_1.swf", {name:"scene1", estimatedBytes:3000, container:contentLoader.scene1}) );
  LoaderMax.prioritize("slide_0.swf");
  queue.load();
 }
 private function completeHandler(event:LoaderEvent):void
 {
  trace(event.target + " is complete!");
 }
 private function init()
 {
  slide1();
 }  private function slide1()
 {
  TweenLite.to(contentLoader.scene0, 1,{x:200});
 }
 private function slide2()
 {
  TweenLite.to(contentLoader.scene1, 1, {x:400});
 }
 private function resetSlide(whichSlide)
 {
  if (whichSlide == "Slide1")
  {
   TweenLite.to(contentLoader.scene0, 0,{x:0});
  }
  else
  {
   TweenLite.to(contentLoader.scene1, 0,{x:0});
  }  }
}
}

[How do I access a function from a child SWF?]

I have a queue from which I load 6 sub SWFs. I want to call a function from the parent/main container. Any help would be greatly appreciated!

 

MovieClip(root).myFunction(); does not work.