Начало работы с GSAP

Я пытаюсь сделать свою первую анимацию с GSAP, и ничего не происходит, даже когда я пытался использовать пример кода.Начало работы с GSAP

У меня есть PHP-файл со следующим кодом:

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<style> 
    #green { 
    width: 100px; 
    height: 100px; 
    background-color: #0D9C02; 
    } 
</style> 
</head> 
<body> 
<div id="green"></div> 
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> 
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    var logo = document.getElementById("green"); 
    TweenLite.to(logo, 1, {left:"600px"}); 
    }); 
</script> 
</body>

Все я получаю, хотя это статический зеленый квадрат. Я должен упустить что-то фундаментальное, но что? Благодарю.

источник

2015-07-05 JohnG

Простое решение: необходимо position: relative; в css для работы.

источник

2015-07-05 14:17:18 JohnG

position свойство в CSS отсутствует

Jsfiddle

HTML элементы расположены static по умолчанию. Левое свойство не действует, если элемент равен position:static.

источник

2015-07-07 10:53:29 answer99

Вам необходимо создать TimeLine, где вы можете прикрепить свои подростки. Вы можете использовать либо TimelineLite, либо TimelineMax (есть небольшая разница между двумя).

Используйте следующие code-

<head> 
<script src="https://cdn.flashtalking.com/frameworks/js/gsap/1.18.0/TimelineLite.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<style> 
    #green { 
    width: 100px; 
    height: 100px; 
    background-color: #0D9C02; 
    } 
</style> 
</head> 
<body> 
<div id="green"></div> 
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> 
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    theTimeline = new TimelineLite(); 
    var logo = document.getElementById("green"); 
    theTimeline.add(new TweenLite.to(logo, 1, {left:"600px"})); 
    }); 
</script> 
</body>

источник

2016-03-16 05:04:08 Ishita

элемента должно иметь значение положения относительных, абсолютные или фиксированный, чтобы иметь возможность переместить его твининг левого значения. Я бы предположил, что не обойти левое свойство, а свойство x. поскольку свойства x и y используют преобразование, а это будет лучше.

источник

2017-05-03 15:27:58

ответ

Смежные вопросы