Skip to content

Commit

Permalink
✨ [Panning media] Transition siblings by ID (#32217)
Browse files Browse the repository at this point in the history 
* Transition siblings by ID.

* update example template.

* Remove comments. Get current state before setting.

* Update example

* Update stars image.

* Update type.

* Resolve conflict

* Revise action function.

* Fallback to amp-img source for group id

* Update example.

* Check animation state before update.

* Fix merge conflict.

* Fix type and update test.

* Example template section comment.

* Update type.

* animateTo_ for readability and symetric data structure between component and store.

* Null check on comparison function.

* typedef

* rename action from set to add.

* Update typedef comment.
  • Loading branch information
@processprocess
processprocess committed Jan 28, 2021
1 parent 4420e10 commit fd1571d
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 142 deletions.
262 changes: 170 additions & 92 deletions examples/amp-story/amp-story-panning-media.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,105 +17,183 @@
publisher="AMP Story"
publisher-logo-src="example.com/logo.png"
poster-portrait-src="example.com/poster.jpg">
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 1">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 2">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<!-- stars example -->
<amp-story-page id="stars-1">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-1'
x="10%"
y="0%"
zoom='1'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-2'
x="0%"
y="0%"
zoom='1'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 3">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="stars-2">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-1'
x="-10%"
y="0%"
zoom='1'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-2'
x="-15%"
y="0%"
zoom='1'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 4">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="stars-3">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-1'
x="-10%"
y="0%"
zoom='2'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
group-id='stars-group-2'
x="-15%"
y="0%"
zoom='1.5'
>
<amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 5">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<!-- painting example -->
<amp-story-page id="painting-1">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 6">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="painting-2">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="painting-3">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 7">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="painting-4">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
y="-50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="painting-5">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="painting-6">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="50%"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="painting-7">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="painting-8">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="50%"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page 8">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="50%"
zoom="2"
>
<amp-story-page id="painting-9">
<amp-story-grid-layer template="fill">
<amp-story-panning-media
layout="fill"
x="-50%"
y="50%"
zoom="2"
>
<amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
Expand Down
Binary file added examples/amp-story/img/stars.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fd1571d

Please sign in to comment.