Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'story telling'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. Hello GSAP community, I am so incredibly impressed with ScrollTrigger - love it! Imagine multiple ScrollTrigger-based stories (eg, three characters), that offer different versions of a story. Upon scrolling to the bottom of the first story, the user is able to view the other two stories. Currently, the HTML looks something like this: <section class="person" id="person1"> <!-- stuff --> </section> <section class="person height-0" id="person2"> <!-- stuff --> </section> <section class="person height-0" id="person3"> <!-- stuff --> </section> With .height-0 having tried many approaches, but currently reading: .height-0, .height-0 div { height: 0px; overflow: hidden; } (display: none seemed to really break things, FYI) I have created a JS file that is attempting to break apart the different steps I think need to happen in order to switch characters: $(document).ready(function() { // WHEN USER CLICKS ON PERSON 2 STORY ... $("#chip-a").click(function() { // SCROLL BACK TO THE TOP $('html, body').animate({ scrollTop: '0px' }, 0); // TURN OFF PERSON 1 $("#person1").toggleClass("height-0"); // TURN ON PERSON 2 $("#person2").toggleClass("height-0"); // ACTIVATE FIRST ANIMATION IN STORY 2 $("#p2-sec1").addClass("activate"); // FETCH JS FILE CONTAINING PERSON 2 SCROLLTRIGGERS window.setTimeout(function() { jQuery.getScript("js/person2.js", function(data, textStatus, jqxhr) { console.log(data); // Data returned console.log(textStatus); // Success console.log(jqxhr.status); // 200 console.log("Load was performed."); }); }, 5); }); }); With person2.js containing the same types of ScrollTrigger elements (pins, CSS classes, GSAP animations) as person1.js. However, ScrollTrigger does then not behave as expected: the pin method, for example, does fire, but doesn't actually append position:fixed to the targeted element. The other animations don't work either, doing strange things like moving 3.4px instead of 500px. I am hoping someone can offer some clever help here. There is obviously something I've overlooked, as ScrollTrigger is still working/firing in my second Story, but not actually affecting items on the page. Unfortunately, I can't upload to CodePen at this time. Thank you in advance! I really look forward to sharing the final product here when finished.
  2. Preface I have an Odyssey in the "space" of D3.js, until I found GreenShock. I wish have found it earlier! I didn't need the (big?) data, just the animation! Chapter 1 Here is the problem of my gsap-animated page. When the page opens there is a black strip on top of image instead of $("#field"), {scaleY: 2} (If you replay, it corrects). After 5 sec begining the animation, an instand flare fires in frond and under the tank!
×